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移动 互联 网 时 代 ， 前 端 工 程 师 经 常 面 临 如 何在 PC 端 和 各 种 移动 平台 
间 器 平台 开发 的 问题 。 针 对 这 个 问题 ， 本 书 在 研究 分 析 当 前 应 用 开发 解决 
方案 和 主流 技术 的 基础 上 ， 提 出 一 种 路 平台 的 前 端 应 用 方案 ， 即 利用 文 持 
标准 HTML5、CSS 和 JavaScript 的 跨 平 台 前 问 框 架 开 发 。 本 书 按 从 基础 到 
开发 大 型 平台 前 问 的 思路 ， 介 绍 了 如 何 使 用 HTML5+CSS+JavaScript 布局 
网 页 的 方法 。 以 大 型 电 商 平 台 作 为 前 端 开 发 的 案例 ， 按 从 入 门 到 高 级 商业 
产品 应 用 的 开发 思路 进行 讲解 ， 让 读者 通过 这 本 书 中 的 内 容 即 可 成 为 一 名 
名 副 其 实 的 前 端 开 发 工程 师 。 

本 书 内 容 丰 富 、 结 构 清 晰 ， 注 重 商业 应 用 思维 的 训练 与 实践 应 用 ， 辐 
读者 提供 了 Web 前 端 开 发 的 基础 知识 、 开 发 技术 、 动 画 特效 的 制作 方法 ， 
适合 初 、 中 级 网 页 设计 爱好 者 ，Web 前 端 工程 师 ， 以 及 希望 对 原 有 网 站 进 
行 重 构 的 网 页 设计 者 使 用 ， 也 可 以 作为 高 等 院 校 相 关 专 业 和 相关 培训 机 构 
的 教学 用 书 。 
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HTMLS 可 以 说 是 近 十 年 来 Web 标准 最 巨大 的 飞跃 ，HTMLS 中 创建 了 很 多 新 元 素 ， 逢 
用 这 些 新 元 素 能 快速 开发 出 更 多 的 类 和 id 标识 。 一 旦 用 户 熟 悉 了 这 些 元 素 的 功能 和 使 用 ， 束 
可 以 在 较 短 的 时 间 内 建立 简单 的 网 页 组 织 ， 它 的 使 命 是 将 Web 融入 一 个 成 熟 的 应 用 平台 。 
在 Web 开发 中 采用 CSS 技术 将 会 显著 地 美化 应 用 程序 ， 可 以 有 效 地 控制 页 面 的 布局 、 宇 
体 、 颜 色 、 背 景 和 其 他 效果 ， 只 需要 进行 一 些 人 简单 的 修改 就 可 以 改变 网 页 的 外 观 和 格式 。 利 
用 好 CSS 可 以 更 快捷 地 得 到 以 往 用 很 多 插件 才能 得 到 的 效果 。 通 过 使 用 元 素 本 号 来 取代 大 
部 分 和 网 片 ， 网 页 的 加 载 速 度 会 得 到 提高 ， 同 时 也 能 极 大 地 提高 程序 的 性 能 。 

本 书 根据 网 页 前 端 工 程 师 需要 掌握 的 核心 工作 技能 ， 按 从 基础 到 丙 业 应 用 实例 开发 的 学 
习 步 又 ， 以 练 种 学， 让 读者 能 够 轻松 、 快 速 地 掌握 相关 的 技能 。 本 书 对 HTML5 和 CSS 样式 
布局 进行 了 深入 的 介绍 ， 对 JavaScript 主要 进行 了 应 用 级 的 介绍 。 

本 书 共 9 章 ， 内 容 包 括 : 

第 1 章 HIMLS 的 基础 知识 。 通 过 学 习 旋 者 可 以 掌握 HTML 文档 的 基本 结构 ， 全 和 面 了 解 
HTML 的 标签 、 元 素 和 属性 的 设置 ， 并 午 握 布局 时 一 些 通 用 的 HTMLS 标签 ， 同 时 对 表单 标 
签 的 应 用 进行 了 详细 的 介绍 。 

第 2 章 CSS 基本 语法 和 应 用 。 介 绍 了 CSS 层 闭 样式 表 的 概念 ，CSS 的 作用 、 类 型 与 冲 
R, URE HTML 中 应 用 CSS 样式 表 的 方法 ;， 对 CSS 的 基本 语法 进行 了 图 文 并 成 的 介绍 ， 
方便 读者 掌握 CSS 的 基本 语法 ;最 后 对 CSS 盒 模型 进行 了 详细 的 举例 说 明 。 

第 3 革 DIV+CSS 网 页 基础 布局 。 详 细 说 明了 DIV 各 元 素 的 属性 设置 和 DIV+CSS 基础 
布局 的 方法 ， 对 列表 元 素 的 布局 进行 了 举例 说 明 ， 并 对 元 素 的 非常 规定 位 的 方式 进行 了 总 
结 ， 介 绍 了 绝对 定位 、 固 定 定位 、 相 对 定位 以 及 程序 的 简化 方法 。 

第 4 JavaScript 编程 应 用 基础 。 人 简单 介绍 了 杉 入 网 页 的 相关 动画 技术 ， 对 JavaScript 
的 编程 应 用 进行 了 详细 的 介绍 。 读 者 要 掌握 在 HTML 页 面 中 如 何 实现 对 JavaScript 的 调用 ， 
最 后 举例 说 明 使 用 JavaScript 实现 图 片 轮 播 的 应 用 。 

第 5 4t Photoshop 网 页 设计 与 应 用 。 介 绍 了 网 站 前 期 策划 的 准备 工作 ， 通 过 学 习 读 者 可 
以 掌握 从 网 站 定位 出 发 使 用 Photoshop 实现 网 页 设计 的 各 个 环节 ， 如 首页 的 版 式 设计 、 页 面 
框架 的 搭建 、 大 小 导航 的 制作 等 内 容 。 

"B 65: HTMLS«CSS 布局 网 页 。 本 章 将 应 用 前 面 几 重 学 习 的 知识 ， 使 用 HTML5+CSS 
制作 一 个 真正 意义 上 的 网 页 ， 通 过 学 习 旋 者 可 以 车 握 如 何 使 用 Photoshop 对 设计 的 网 页 图 片 
进行 切片 ， 如 何 使 用 HIML5+CSS 布局 一 个 精美 的 站 页 效果 ， 并 掌握 莱 容 IE 的 设置 。 

第 7 章 电 子 商城 首页 布局 。 介 绍 了 电子 商城 系统 规划 的 方法 ， 使 用 Dreamweaver 进行 网 
站 站 点 的 建 这 ， 重 置 样式 表 的 高 级 应 用 ， 对 搜索 功能 、 导 航 、 市 场 精 选 频 道 等 功能 模块 进行 
不 同 的 样式 布局 。 

第 8 章 用 户 管 理 系统 布局 。 介 绍 了 一 个 网 站 用 户 管理 系统 的 规划 ， 详 细 介 绍 了 用 户 注册 
功能 的 布局 操作 ， 强 调 了 表单 的 交互 验证 方法 ， 并 对 用 户 登 录 模 块 进行 了 详细 的 布局 设计 ， 
最 后 对 找 回 冠 码 的 布局 负面 进行 了 评 细 的 介绍 。 
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第 9 章 购 物 和 车 系统 布局 。 根 据 购物 车 系统 从 下 订单 到 结算 的 流程 ， 介 绍 了 产品 前 台 展 示 
的 两 个 页 面 “产品 列表 页 .html” 和 “产品 详情 页 .html” 的 制作 方法 。 讲 解 了 如 何 使 用 
JavaScript 实现 订单 的 统计 和 信息 交互 动态 功能 ， 最 后 对 通过 购物 车 下 订单 的 4 个 步 又 分 别 
设计 了 4 个 页 面 。 

本 书 内 容 广 泛 、 产 台 别 致 ， 是 网 页 开发 前 中 布局 设计 的 最 佳 参考 资料 。 本 书 中 的 每 个 实 
例 都 融合 了 适合 其 类 别 的 动态 功能 ， 拥 有 各 目的 设计 特点 ， 非 常 适合 读者 在 设计 和 制作 时 参考 
和 应 用 。 本 书 也 是 网 页 制作 的 最 佳 素 材 宝典 ， 在 实际 应 用 中 能 令 您 创 半 无 限 ， 使 制作 更 加 人 简 
化 与 方便 。 

本 书 由 王 志 晓 负 员 第 1~5 章 的 编写 ， 陈 蔡 材 负责 第 6 一 9 章程 序 的 编写 ， 牛 海 建 负 责 本 
PRIKK LRS. SIAPA Tiza HRI EEM AN 
KA EK USE. BITS ER. ARCBaüI RBAXEBDUEE SG. WURA 
批评 指正 。 
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c zs ”HTML5 基础 知识 


互联 网 中 所 有 的 网 页 都 是 用 HTML 格式 的 文本 编写 成 的 ， 浏 览 器 用 来 解释 这 些 文本 ， 
并 将 其 呈现 出 来 ， 所 以 用 户 要 学 习 使 用 HTML+CSS 进行 网 页 前 端 设计 和 开发 首先 必须 熟悉 
HTML 语言 。HTML 语言 有 目 己 的 语法 格式 和 编写 规范 ， 这 些 都 是 由 HTML 规范 定义 的 。 
创作 者 根据 该 规范 创作 网 页 ， 浏 览 器 厂商 根据 该 规范 解释 和 泻 当 网页。 本章 将 简单 介绍 
HTML 语言 的 格式 和 HTMLS 布局 常用 标签 。 
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HTML 文档 类 型 
HTML 文档 标准 结构 
HTML 标签 概念 
元 素 和 和 元素 形式 
常用 标签 的 使 用 
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"s HTML54CSS- JavaScript CELITNBELTI. 


CER HTML 文档 基本 结构 


在 浏览 右 中 ， 文 本 以 一 定 的 格式 显示 出 来 ， 岁 片 及 其 他 多 媒体 文件 则 通过 HTMEL 文档 中 
所 标识 的 路 径 被 调用 。 浏 览 器 从 HTML 代码 中 读 取 图 像 的 位 置 ， 并 说 浏览 右 解 释 后 显示 出 
来 ， 其 他 的 多 媒体 格式 也 是 如 此 。HTML 文本 是 由 HTML itd 得 成 的 描述 性 文本 ，HTML 
标签 可 以 说 明文 学 、 图 形 、 动 画 、 声 首 、 表 格 、 链 接 等 。 


有 HIML 文档 编辑 器 


设计 者 只 要 明白 了 各 种 标签 的 用 法 ， 便 学 会 了 HTML。HTML 的 标签 格式 非常 丛 单 ， 乞 
是 由 文学 及 标签 组 合 而 成 的 。 由 于 HTML 只 是 文本 ， 因 此 任何 文本 编辑 器 都 可 以 编辑 它 ， 
这 种 编写 方法 也 称 为 “手工 编写 代码 ”的 方式 。 如 条 要 创建 精彩 效果 ， 特 别 是 实现 精彩 的 布 
局 ， 使 用 可 视 化 编辑 软件 是 非常 必要 的 ， 对 于 专业 布局 工作 人 员 我 们 推荐 使 用 所 见 即 所 得 的 
Dreamweaver 软件 ， 如 图 1-1 所 示 。 
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1-1 Dreamweaver CC 2015 软件 操作 界面 


OD HM 文档 类 型 


下 面 创建 一 个 简单 的 HIMLS 文件 。 运 行 Dreamweaver CC 2015 软件 ， 选 择 菜单 栏 中 的 
“文件 ”一 “新 建 ” 人 命令， 打开“ 新 建文 档 ” 对 话 框 ， 如 图 1-2 所 示 。 


E: E-WEN HTML5 基 础 知识 


i 
ma 
dx 
ka 


HTML 
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& [C] 4&5 Extract J, Photoshop 复合 中 构建 页 


[帮助 00 ] [首选 参数 )... ] 
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图 1-2 “BEE” Xp UE 


新 手 会 质疑 为 什么 有 那么 多 的 “文档 类 型 ” 其 实 这 是 HTML 不 同 阶 段 的 不 同 版 本 ， 不 
同 的 地 方 就 是 DOCTYPE 声明 以 及 DOCTYPE 声明 对 网 页 起 了 什么 作用 。DOCTYPE 
(DOCument TYPE) 主要 用 来 说 明 用 户 使 用 的 XHTML 或 者 HTML 是 什么 版 本 。 浏 览 器 根 
35H] ^ iH] DOCTYPE 定义 的 “文档 类 型 ”来 解释 页 面 代 但 。 

说 明 : HTML 与 XHTML 有 什么 区 别 

可 扩展 超 文本 标记 语言 XHTML (eXtensible HyperText Markup Language) 是 HTML 
4.01 的 第 1 个 修订 版 本 ， 是 3 种 HIML4 文件 根据 XML 1.0 标准 重组 而 成 的 。 也 就 是 说 
XHTML 是 HTML 4.01 和 XML 1.0 的 结合 。 由 于 XHTML 1.0 是 基于 HTML 4.01 的 ， 并 没有 
引入 任何 新 标签 或 属性 (XHTML 可 以 看 作 是 HTML 的 一 个 子 集 )， 其 表现 方式 与 超 文本 标 
记 语 言 HTML 类 似 ， 只 是 语法 上 更 加 严格 ， 几 乎 所 有 的 网 页 浏览 器 在 正确 解析 HTML 的 同 
时 可 兼容 XHTML. 

例如 XHTML 中 所 有 的 标签 必须 小 写 ， 所 有 的 标签 必须 闭合 ， 每 一 个 属性 都 必须 使 用 引 
号 引起 来 。<br> 要 写成 <br 和 >， 不 能 写成 <BR/>， 在 使 用 了 <p> 之 后 必须 有 一 个 </p> 结 来 
段落 。 

现在 HIMLS 比较 盛行 ， 因 此 本 书 文 档 的 编写 也 以 该 文档 类 型 为 主 ，HTMLS5 的 标签 及 
实例 开发 应 用 将 在 第 5 章 进 行 详细 介绍 ， 作 为 前 端的 高 级 设计 人 员 要 全 面 了 解 一 下 
DOCTYPE 的 几 种 类 型 。XHTML 1.0 提供 了 3 种 DOCTYPE 供用 户 选 择 。 

1. 过 渡 型 (Transitional ) 

打开 Dreamweaver CC2015 ， 选择 “文档 类 型 ”下 拉 列 表 框 中 的 XHTML 1.0 
Transitional 新 建 一 个 HTML 文档 ， 然 后 切换 到 “代码 ”窗口 ， 可 以 发 现 第 1 行 束 是 定义 文 
档 类 型 的 代码 标准 ， 如 图 1-3 所 示 。 


l HTML5+CSS+JavaScript 网 页 布局 从 入 门 到 精通 


IB untitled-1 XHTML) Ex 


<1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ^ 
"http: //www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"» 
«html xmlns-"http://www.w3.0rg/1999/xhtml"» 
HR <head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
: <title> 无 标题 文档 </title> 
K </head> 


n 


LUI 


8 <body> 
| c </body> 


</html> 


o C ©. 


图 1-3 定义 XHTML 文档 标准 
其 中 用 于 声明 的 代码 如 下 : 


«IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ 
TR/xhtml1/DTD/xhtml]-transitional.dtd"- 


在 DOCTYPE 声明 以 后 ， 接 下 来 的 代码 是 : 


«html xmlns-"http://www.w3.org/1999/xhtml" > 


i845; HTMLA.0 BJ4C6 43 H ié «html», ix HH *xmlns" ÆA? x HH] "xmlns" Æ 
XHTML namespace 的 缩写 ， 称 为 “名 学 空间 ”声明 。 名 学 空间 有 什么 作用 呢 ? 由 于 XML £e 
许 用 户 定 义 目 己 的 标识 ， 所 定义 的 标识 和 其 他 人 定义 的 标识 有 可 能 相同 ， 但 表示 不 同 的 意 
义 ， 当 交换 或 者 共享 文件 的 时 候 就 容易 产生 错误 。 为 了 避免 这 种 错误 发 生 ，XML 采用 名 字 
空间 声明 ， 人 允许 用 户 通 过 一 个 网 址 指 同 来 识别 标识 。 名 学 空间 束 是 用 来 给 文档 做 一 个 标记 ， 
告诉 别人 这 个 文档 是 属于 谁 的 ， 只 不 过 这 个 “ 谁 ” 是 用 了 一 个 网 址 来 代替 的 。 

XHTML 是 HTML |5] XML 过 渡 的 标识 语言 ， 它 需要 符合 XML 文档 规则 ， 因 此 也 需要 
iE X raa. XP XHTMLI.0 不 能 目 定 义 标 识 ， 所 以 它 的 名 学 空 间 都 相同 ， 就 是 
“http://www.w3.org/1999/xhtml”。 如 果 用 户 还 不 太 理 解 也 不 要 紧 ， 在 目前 阶段 我 们 只 要 照抄 
代码 就 可 以 了 。 

为 了 被 浏览 器 正确 解释 和 通过 标识 校 验 ， 所 有 的 XHTML 文档 都 必须 声明 它们 所 使 用 的 
编码 语言 ， 代 人 码 如 下 : 


«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /> 


这 里 声明 的 编码 语言 是 通用 编码 utft8， 如 果 需 要 制作 纯 中 文 内 容 ， 可 以 定义 为 
GB2312， 繁 体 中 文 为 BIG5。 

utf-8 是 一 种 针对 Unicode 的 可 变 长 度 字 符 编 码 ， 又 称 万 国 码 ， 由 Ken Thompson 于 1992 
年 创建 ， 现 在 已 经 标准 化 为 RFC 3629。utf-8 用 1 到 4 个 字 节 编码 Unicode 字符 ， 用 于 网 页 
上 可 以 在 同一 页 面 中 显示 中 文 简体 、 繁 体 及 其 他 语言 《如 日 文 、 寻 文 )。 

GB2312 即 信息 交换 用 汉字 编码 字符 集 .。《 人 信息 交换 用 汉字 编码 字符 集 》 是 由 中 国 国家 标 
(E ja T 1980 年 发 布 ，1981 年 $5 月 1 日 开始 实施 的 一 套 国家 标准 ， 标 准 号 是 GB2312— 
1980. GB2312 编码 适用 于 汉字 人 处理 、 汉 字 通 信 等 系统 之 间 的 信息 交换 ， 通 行 于 中 国 大 陆 ， 
新 加 坡 等 地 也 采用 此 编码 ， 中 国 大 陆 几 乎 所 有 的 中 文系 统 和 国际 化 的 软件 都 文 持 GB2312。 


HTML5 基 础 知识 


人 简体 中 文 网 站 使 用 GB2312 的 比较 多 ， 从 文学 文 持 上 来 说 utf-8 要 比 GB2312 多 。 一 般 企 
业 网 站 可 根据 上 自己 的 情况 选择 网 页 编码 。 
2. 严格 型 (Strict ) 
单 击 “ 文 档 类 型 ”下 拉 列 表 框 中 的 XHTML1.0 Strict， 新 建 一 个 HTML 文档 ， 代 码 如 下 di 


(如 图 1-4 所 示 ): 


<IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strct//EN""http://www.w3.org/TR/ 
xhtml1/DTD/xhtmll -strict.dtd" 


TB untitled-2 (xw) 
£! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.8 Strict//EN" 
"http: / /www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"» 
<htmL xmlns-"http://www.w3.org/1999/xhtml"- 
zhead- 
ameta http-equiv-"Content-Type" content-"text/html; charset-utf-&8" /> 
<titLe> 无 标题 文档 </titLe> 
</head 


«body> 
</body> 
</html> 


1-4 定义 严格 型 XHTML 文档 标准 


LEES HTML 文档 标准 结构 


对 于 初学 者 来 说 ， 只 要 选择 HTMLS 文档 类 型 就 可 以 了 ， 它 可 以 兼容 用 户 的 表格 
和 DIV 布局 、 表 格 标识 等 。 在 “文档 类 型 ”下 拉 列 表 框 中 选择 HTMLS5 选项 ， 然 后 单 击 “ 创 
建 ” 按 钮 ， 创 建 一 个 HTMLS 标准 文档 。 

一 个 HTML 文档 由 4 个 基本 部 分 组 成 ， 如 图 1-5 所 示 。 


<ldoctype html» 

<html> 

zhead- 

ameta charset-"utf-8'- 
< 上 titLes> 无 标题 文档 </titLey> 
z/head- 


<body> 
</body> 
<html> 
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1-5 HTMLS 文档 标准 


f HTML5+CSS+JavaScript 网 页 布局 从 入 门 到 精通 


1) 文档 类 型 声明 : 表明 该 文档 是 HTML 文档 。 

在 使 用 HTML 语法 编写 HTML 文档 时 要 求 指 定 文 档 类 型 ， 以 确保 浏览 占 能 在 HTMLS 
标准 模式 下 泻 染 网 页 。 

文档 类 型 声明 如 下 : 


<IDOCTYPE HTML> 


考虑 到 HTML 语法 不 区 分 大 小 写 ，<!DOCTYPE html», «!'DOCTYPE HTML> 等 也 是 正 
确 的 。 

in AH: 

注意 ， 一 些 网 页 被 保存 为 以 .htm 为 扩展 名 的 文件 。 这 里 需要 说 明 的 是 ，HTML 文件 既 可 
以 保存 为 *html 文件 ， 也 可 以 保存 为 *.htm 文件 ，HTML 网 页 文件 可 以 使 用 这 两 种 扩展 名 ， 
并 且 这 两 种 扩展 名 没有 本 质 的 区 别 ， 主 要 是 因为 在 某 些 较 旧 的 系统 上 不 能 识别 4 位 的 文件 扩 
展 名 。 

2) html 标签 对 : 用 来 表示 HTML 文档 的 开始 和 结束 。 

<html> 标 签 位 于 HTML 文档 的 最 前 面 ， 用 来 标识 HTML 文档 的 开始 ， 而 </html> 标 签 则 
放 在 HTML 文档 的 最 后 面 ， 用 来 标识 HTML 文档 的 结束 。 

3) head 标签 对 : 其 间 的 内 容 构成 HIML 文档 的 开头 部 分 。 

<head> 和 </head> 构 成 HIML 文档 的 开头 部 分 ， 在 此 标签 对 之 间 可 以 使 用 <titile> 
</title>、<scripf></scrip 们 等 标签 对 ， 这 些 标签 对 都 是 用 于 描述 HTML 文档 相关 信息 的 标签 
对 ，<head></head> 标 签 对 之 间 的 内 容 不 会 在 浏览 器 的 框 内 显示 出 来 。 

4) body 标签 对 : 其 间 的 内 容 构成 HIML 文档 的 主题 部 分 。 

<body></body> 是 HTML 文档 的 主题 部 分 ， 在 此 标签 对 之 则 可 以 包含 <p>、</p>、 
<hl>、</h1l>、<br>、<hg 等 众多 标签 ， 对 于 可 视 化 浏览 器 ， 可 以 将 <body></body> 之 间 的 内 
容 作为 一 个 画布 ， 文 本 、 图 片 、 颜 色 等 都 在 该 画布 中 呈现 出 来 。 


本 书 中 重点 介绍 的 DIV 布局 〈 即 整个 网 页 所 见 即 所 得 的 内 容 页 面 ) 全 部 包含 在 body 标 
签 对 中 。 


HM 标 念 、 元 素 和 属性 


HTML 是 简单 的 文本 标签 语言 ， 一 个 HTML 网 页 文件 是 由 元 素 构成 的 ， 元 素 由 开始 标 
签 、 结 束 标 签 、 属 性 和 元 素 的 内 容 4 个 部 分 构成 ， 用 户 在 和 学习 和 使 用 HTML 时 要 注意 区 分 
标签 和 元 素 这 两 个 概念 。 


LE EM 标 念 的 概念 
标签 是 元 素 的 组 成 ， 用 来 标记 内 容 块 ， 也 用 标签 来 标明 元 素 内 容 的 意义 〈 即 语义 )。 标 


签 使 用 尖 括 号 包围 ， 如 <html></html>， 这 两 个 标签 表示 一 个 HTML 文件 。 
标签 的 使 用 有 两 种 形式 ， 即 成 对 出 现 的 标签 和 单独 出 现 的 标签 。 无 论 使 用 哪 一 种 标签 ， 
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标签 中 都 不 能 包含 空格 。 
例如 下 面 的 代码 是 错误 的 ， 因 为 其 中 包含 空格 。 
<html></html > 
<head></html> > 


« head >< /head > 


1. 成 对 出 现 的 标签 
成 对 出 现 的 标签 也 束 古 包含 开始 标签 和 结束 标签 的 形式 ， 其 基本 格式 如 下 : 


< 开始 标签 > 网 页 的 内 容 </ 结 束 标签 > 


如 前 问 布 局 经 常用 到 的 “<div> 网 页 的 内 容 </div>” 就 是 一 个 标准 的 成 对 应 用 的 标签 。 
e 开始 标签 : 表示 一 段 内 容 的 开始 ， 例 如 <html> 表 示 HTML 文件 开始 ， 到 </html> 结 
束 ， 从 而 组 成 了 一 个 HTML 文件 。<head> 和 </head> 标 签 描述 HTML 文档 的 相关 信 
县 ， 之 间 的 内 容 是 不 会 在 浏览 堪 的 框 内 显示 出 来 的 。<body> 和 </body> 在 浏览 句 窗 口 
中 显示 主要 内 容 ， 也 是 HTML 文件 的 主要 部 分 。 
e 结束 标签 : </head>、</body> 和 </html> 是 与 开始 标签 对 应 的 结束 标签 ， 结 束 标 签 比 开 
始 标签 多 一 个 笠 杠 。 
2. 单独 出 现 的 标签 
虽然 并 不 是 所 有 的 开始 标签 都 必须 有 结束 标签 对 应 ， 但 通常 建议 “开始 标签 ”最 好 用 一 
个 对 应 的 “结束 标签 ”关闭 ， 这 样 能 使 网 页 易于 阅读 和 修改 。 
如 果 在 开始 标签 和 结束 标签 之 间 没 有 内 容 ， 那 么 就 不 必 这 样 做 ， 如 换行 标签 可 以 写成 
«br» (在 后 面 的 学 习 中 读者 将 会 了 解 它 的 用 法 )。 例 如 下 面 的 代码 中 <br> 就 是 一 个 单独 出 现 
的 标签 : 


网 页 内 容 的 第 一 行 <br> 
网 页 内 容 的 为 一 行 <br> 
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标签 用 于 为 一 个 元 素 的 开始 和 结束 做 标记 ， 网 页 内 容 是 由 元 素 组 成 的 ， 例 如 包含 在 
<html>、</html> 标 签 之 间 的 都 是 元 素 内 容 。 元 系 主 要 有 以 下 儿 种 形式 。 
1) 一 个 元 素 通 第 由 一 个 开始 标签 、 内 容 、 其 他 元 素 及 一 个 结束 标签 组 成 。 
例如 <head> 和 </head> 是 标签 ， 但 在 下 耐 的 代码 中 则 是 一 个 head 7638 - 


<head><title> 这 是 制作 的 网 页 </title></head> 
在 上 面 这 个 元 素 中 <title> 和 </title> 是 标签 ， 但 在 下 面 的 代码 中 则 是 title 元 素 。 
<title> 这 是 制作 的 网 页 </title> 


同时 ， 这 个 title EREE head 元 素 中 的 另 一 个 元 素 。 
head. title 又 被 称 为 元 素 名 ， 在 后 面 的 文档 中 会 经 彰 使 用 head 元 素 〈 或 者 <head> 元 
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素 )、title TE (或 者 <tide> 元 素 ) 这 样 的 简称 来 表示 它们 之 间 的 元 素 内 容 。 
2) 有 一 些 元 素 有 内 容 ， 但 允许 忽略 结束 标签 。 
例如 ， 下 面 的 代码 省 略 了 结束 标签 </p>。 
<p> 这 是 第 一 段 文字 
<p> 这 是 第 二 段 文本 
等 同 于 : 
«p»3iUE— BU X Ap» 
<p> 这 是 男 一 段 文本 </P> 
3) 有 一 些 元 素 其 至 允许 忽略 开始 标签 。 
例如 ，html、head 和 body 等 元 素 都 允许 忽略 开始 标签 ， 虽 然 HTML 规范 允许 这 样 做 ， 
但 一 般 不 推荐 这 样 做 ， 人 否则 会 使 文档 变 得 很 难 阅读 。 
4) 有 一 些 元 素 可 以 没有 内 容 ， 因 此 不 需要 结束 标签 。 
例如 ， 换 行 元 素 br 可 以 写成 : 


<br><br> 


每 一 个 br 元 素 都 没有 内 容 。 

5) 元 素 应 该 合理 极 套 。 

和 HTML4 不 同 ， 所 有 的 HIMLS 标签 都 必须 合理 散 套 ， 所 有 的 髓 套 都 必须 按 顺 序 ， 以 
下 代码 : 


<p> 这 里 是 <em> 强 调 的 内 容 </p></em> 
<p> 这 里 是 <em> 强 调 的 内 容 </em></p> 
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1.2.3 属性 的 定义 


与 元 系 相 关 的 特性 称 为 属性 ， 用 户 可 以 为 属性 赋值 《每 个 属性 总 是 对 应 一 个 属性 值 ， 因 
此 也 被 称 为 “属性 / 值 ” 对 )。 “属性 / 值 ”对 出 现在 元 素 开 始 标签 的 最 后 一 个 “> ”之 前 ， 通 过 
空格 分 隔 。 在 一 个 HTML 文档 中 可 以 有 任何 数量 的 “属性 / 值 ” 对 ， 它 们 可 以 以 任何 顺序 出 
现 ， 但 是 不 能 在 同一 个 开始 标签 中 定义 同名 的 属性 属性 名 是 不 区 分 大 小 写 的 )。 

虽然 在 前 面 的 HIML 例子 中 属性 值 痢 用 引号 包含 ， 但 在 一 些 避 况 下 开 友 者 可 以 不 用 引 
号 包含 属性 值 ， 这 时 的 属性 值 应 该 仅 包 含 ASCI 字符 (a~z 以 及 A~Z)、 数 字 (0 一 9)、 连 
FI OCh ARAY COR FRR O 以 及 昌 写 〈: )， 但 使 用 引号 可 以 更 好 地 表现 ， 这 也 是 
W3C 提倡 使 用 的 ， 并 且 可 以 顺利 地 和 未 来 的 新 标准 衔接 。 

引号 可 以 是 蛙 引 号 或 者 双 引 写 ， 属 性 的 使 用 格式 如 下 : 
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«JUR 属性 =" 值 "> 内 容 </ 元 素 > 
< 元 系 属性 =' 值 > 内 容 </ 元 素 > 


或 者 
< 元 素 属性 = 值 > 内 容 </ 元 素 > 


124 


元 素 名 和 属性 都 是 不 区 分 大 小 写 的 ， 例 如 下 面 3 个 标签 的 效果 是 相同 的 : 
<head>、<HEAD> 和 <HeAd> 
一 些 用 户 建 议 标签 使 用 大 写字 母 、 属 性 使 用 小 写字 母 ， 这 是 为 了 更 好 地 阅读 和 理解 
HTML 文档， 但 建议 用 户 都 使 用 小 写 ， 这 是 未 来 HTML 发展 的 方 句 ， 并 且 HTMLA 规范 的 更 
新 版 本 XHTML 规定 标签 名 和 属性 必须 是 小 写 的 。 
虽然 元 素 和 属性 不 区 分 大 小 写 ， 但 是 有 些 属性 的 值 确实 区 分 大 小 写 。 例 如 ， 属 性 class 


RI id 的 值 就 是 区 分 大 小 写 的 。 并 非 所 有 属性 的 值 都 区 分 大 小 写 ， 大 部 分 属性 的 值 是 不 区 分 大 
小 写 的 。 


| Section | 


DEN 常 用 HTML5 标签 


前 面 介绍 了 HTMLS5 的 文档 结构 和 编辑 标准 ， 是 为 了 帮助 前 端 工 程 师 在 编写 文档 的 时 候 
能 够 编写 出 符合 标准 的 网 页 ， 如 果 要 掌握 DIV-CSS 的 布局 方法 ， 首 先 要 深入 学 习 和 了 解 
HTMLS 的 标签 及 功能 应 用 。 


1.3.1 


HTML 基础 标签 一 共有 9 个 ， 如 表 1-1 所 示 。 其 中 <!IDOCTYPE> , «html», <body>JL 
个 标签 已 经 在 前 面 用 到 ， 这 里 介绍 其 他 第 用 基础 标签 的 使 用 。 


表 1-1 基础 标签 


标 签 J fe fa 
<IDOCTYPE> 定义 文档 类 型 
<html> 定义 HTML 文档 
<title> 定义 文档 的 标题 
<body> 定义 文档 的 主体 
«hl» to <h6> 定义 HTML 标题 
<p> 定义 段落 
<br> 定义 简单 的 折 行 
<hr> 定义 水 平 线 


de 定义 注释 
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1. HTML 标题 使 用 的 标签 

HTML 标题 是 通过 <h1>~<h6> 标 签 进 行 定义 的 ，<h1> 定 义 最 大 的 标题 ，<h6> 定 义 最 小 
的 标题 。 由 于 h 元素 拥有 确切 的 语义 ， 在 使 用 时 需要 选择 恰当 的 标签 层级 来 构建 文档 的 结 
构 。 注 意 ， 不 要 利用 标题 标签 来 改变 同一 行 中 宇 的 大 小 ， 应 当 使 用 新 的 层 登 样式 表 定 义 ， 达 
到 漂亮 的 显示 效果 。 


例如 : 


<hl>HTMLS 的 标题 1</h1> 
-h2-HTMLS 的 标题 2</h2> 
<h3>HTMLS 的 标题 3</h3> 
<h4>HTMLS 的 标题 4</h4> 
<h5>HTML5 的 标题 5</h5> 
<h6>HTMLS 的 标题 6</h6> 


2. HTML 段落 <p> 

HTML 段 洲 是 通过 <p> 标 签 进行 定 义 的 。p 元 素 会 目 动 在 其 前 后 创建 一 些 空白 ， 浏览 器 
会 自动 添加 这 些 空间 ， 也 可 以 在 独立 的 样式 表 中 规定 新 的 段落 样式 。 

例如 : 


<p> 这 是 第 一 段 文 字 。</p> 
EL 生气 


<p> 这 是 第 二 段 文 字 。</p> 


3. 属性 title 

title 规定 元 素 的 额外 信息 《可 在 工具 提示 中 显示 )。 浏 览 占 以 特殊 的 方式 使 用 标题 ， 并 
有 目 通 第 把 它 放 置 在 浏览 右 窗 口 的 标题 栏 或 状态 栏 上 。 同 样 ， 当 把 文档 加 入 用 户 的 链接 列表 或 
者 收藏 来 、 书 签 列 表 时 ， 标 题 将 成 为 该 文档 链接 的 默认 名 称 。 

例如 : 


«p title=" 这 是 一 个 伟大 的 评 人 "> 他 日 </p> 


4. 换行 标签 <br> 
使 用 <br> 标 签 可 插入 一 个 简单 的 换行 符 。<br> 标 签 是 空 标签 (意味 着 它 没 有 结束 标签 ， 
因此 以 下 是 错误 的 :<br></br>)。 在 XHTML 中 把 结束 标签 放 在 开始 标签 中 ， 也 就 是 <br /. 
<br> 标 签 只 是 简单 地 开始 新 的 一 行 ， 当 浏览 右 遇 到 <p> 标 签 时 通 负 会 在 相 邻 的 段落 之 间 插 入 
一 些 重 和 的 间距 。 
5. 注释 标签 <!-- --> 
注释 不 会 被 浏览 器 显 示 出 来 。 注 释 标 签 用 于 在 源 代码 中 插入 注释 ， 可 使 用 注释 对 
代码 进行 解释 ， 这 样 做 有 助 于 在 以 后 的 时 间 对 代码 进行 编辑 ， 当 编写 大 量 代 码 时 尤其 
有 用 。 
例如 : 
<!-- 注 释 不 会 在 浏览 器 中 显示 ， 只 起 到 说 明 的 作用 。--> 
<p> 这 是 一 段 普通 的 段落 。</p> 


DIL HERE 
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HTML 中 的 格式 标签 比较 多 ， 如 表 1-2 所 示 。 应 用 这 些 标签 基本 上 可 以 实现 对 整个 网 页 (CO>) 


bo S 
<acronym> 
<abbr> 
<address> 
<b> 
<bdi> 
<bdo> 
<þbi g> 
<blockquote> 
<center> 
<cite> 
<code> 
<del> 
<dfn> 
<em> 
<font> 
<j> 
<ins> 
<kbd> 
<mark> 
<meter> 
<pre> 
<progress> 
<q> 
<rp> 
«rt 
«ruby- 
<s> 
<samp> 
<small> 
<strike> 
<strong> 
<sup> 
<sub> 
<time> 
<tt> 
<u> 
<var> 


<wbr> 
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表 1-2 格式 标签 
功能 描述 

定义 只 取 首 字母 的 缩写 
定义 缩写 
定义 文档 作者 或 拥有 者 的 联系 信息 
定义 粗 体 文本 
定义 文本 的 文本 方向 ， 使 其 脱离 其 周围 文本 的 方向 设置 
定义 文字 方 问 
定义 大 号 文本 
定义 长 的 引用 
不 赞成 使 用 。 定 义 居中 文本 
定义 引用 (citation) 
定义 计算 机 代码 文本 
定义 被 删除 文本 
定义 项 目 
定义 强调 文本 
不 赞成 使 用 。 定 义 文本 的 字体 、 尺 寸 和 颜色 
定义 和 斜体 文本 
定义 被 插入 文本 
定义 键盘 文本 
定义 有 记号 的 文本 
定义 预定 义 犯 围 内 的 度量 
定义 预 格式 文本 
定义 任何 类 型 的 任务 的 进度 
定义 短 的 引用 
定义 浏览 器 不 支持 ruby 元 素 时 显示 的 内 容 
定义 ruby 注释 的 解释 
定义 ruby 注释 
不 赞成 使 用 。 定 义 加 删除 线 的 文本 
定义 计算 机 代码 样本 
定义 小 号 文本 
不 赞成 使 用 。 定 义 加 删除 线 文 本 
定义 语气 更 为 强烈 的 强调 文本 
定义 上 标 文本 
定义 下 标 文 本 
定义 日 期 /时 间 
定义 打字 机 文本 
不 赞成 使 用 ， 定 义 下 划 线 文本 
定义 文本 的 变量 部 分 
定义 视频 


1. 引用 <blockquote> 标 签 和 <q> 标 签 
€ <blockquote> 定 义 长 的 引用 ， 在 浏览 器 中 呈现 为 一 段 缩 进 的 文本 。 
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例如 : 


<p> 
HTML5 网 页 设计 要 学 习 的 内 容 为 : 


<blockquote>HTMLS、CSS3、JavaScript... </blockquote> 
</p> 


e <q> 和 定义 短 的 引用 ， 在 浏览 磺 中 呈现 为 引 扎 。 


<p> 
HTML5 网 页 设计 要 学 习 的 内 容 为 : 


<q> HTML5, CSS3, JavaScript...</q> 
</p> 


2. <pre> 标 签 

pre 元 素 可 定义 预 格式 化 的 文本 ， 被 包围 在 pre 元 素 中 的 文本 通常 会 保留 空格 和 换行 
从。<pre> 标 签 的 一 个 常见 应 用 束 是 用 来 表示 计算 机 的 源 代码 。 

可 以 导致 段落 断 开 的 标签 a 题 、<p> 和 <address> 标 签 ) 绝对 不 能 包含 在 <pre> 所 定 
义 的 块 里 。 尽 管 有 些 浏览 器 会 把 段落 结束 标签 解释 为 简单 的 换行 ， 但 是 这 种 行为 在 所 有 浏览 
融 中 并 不 都 是 一 样 的 。pre 元 素 中 人 允许 的 文本 可 以 包括 物理 样式 和 基于 内 容 的 样式 变化 ， 以 
及 链接 、 图 像 和 水 平分 隔 线 。 当 把 其 他 标签 〈 例 如 <a> 标 签 ) 放 到 <pre> 块 中 时 就 像 放 在 
HTML/XHTML 文档 中 的 其 他 部 分 一 样 。 

例如 : 


<pre> 
&lt;html&gt; 
&lt;head&gt; 
&lt;script type-&quot;text/Javascript&quot; src-&quot;loadxmldoc.]s&quot;&gt; 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body &gt; 
&lt;script type-&quot;text/Javascript&quot; &gt; 
xmlDoc=<a hre 住 "about.php"> 关 于 我 们 的 文档 </a>(&quot;books.xml&quot;); 
document.write(&quot; 关 于 我 们 的 文档 已 经 装载 ,准备 备用 &quot;); 
&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt; 


</pre> 


3. <ins> 标 签 和 和 <del> 标 答 

e <ins> 标 签 定义 已 经 被 插入 文档 中 的 文本 。 

@ <del> 标 签 定义 文档 中 已 被 删除 的 文本 。 

<del> 标 签 和 <ins> 标 签 配合 使 用 ， 用 来 描述 文档 中 的 更 新 和 修正 。 
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大 多 数 浏览 右 会 改写 为 删除 文本 和 下 划 线 文本 。 
例如 : 


<p> 春 风 又 <del> 过 </del><ins> 绿 </ins> 江 南岸 </p> A 


4. 文字 字体 格式 标签 <b>、<i>、<small>、<em>、<strong> 
@ <b> 定 义 粗 体 文本 。<b> 标 签 用 于 强调 某 些 文 本 。 

e <i> 定 义 笠 体 文本 。 

€ <small> 标 签 将 劳 注 呈现 为 小 型 文本 。 
@ 

@ 


«em» 5E X sms] X A. 
<strong> 定 义 更 强烈 的 强调 文本 。 
Aul Vids db em 元 素 呈 现 为 斜体 ， 而 将 strong 元 素 呈 现 为 粗 体 。 

5. 注音 标签 <ruby> 和 <rt> 
© <ruby> 标 签 定 义 ruby 注释 (中 文 注音 或 学 符 )。 
e < 标签 定义 字符 (中 文 注 首 或 字符 的 解释 或 发 音 )。 
<ruby> 标 签 是 HTMLS 中 的 新 标签 。 
<ruby> 和 <r 人 标签 一 同 使 用 。 
例如 : 


<ruby> 
陈 小 明 <rt>chen xiao ming</rt> 
</ruby> 


6. 下 标 <sub> 和 上 标 <sup> 

@ <sub> 定 义 下 标 广 本。 包含 在 <sub> 标 签 和 其 结束 标签 </sub> 中 的 内 容 将 会 以 当前 文本 
流 中 字符 高 度 的 一 半 来 显示 ， 但 是 与 当前 文本 流 中 文字 的 学 体 和 字号 都 是 一 样 的 。 

@ <sup> 定 义 上 标 文本 。 包 售 在 <sup> 标 签 和 其 结束 标签 </sup> 中 的 内 容 将 会 以 当前 文本 
流 中 字符 高 度 的 一 半 来 显示 ， 但 是 与 当前 文本 流 中 文字 的 学 体 和 字号 都 是 一 样 的 。 

例如 : 


<hl>H<sub>2</sub>O</h1> 
<h2>E = mc<sup>2</sup></h2> 


7. 突出 显示 文本 <mark> 

<matk> 定 义 有 记号 的 文本 。<mark> 标 签 是 HTMLS5 中 的 新 标签 ， 在 需要 突出 显示 文本 时 
使 用 <mark> 标 签 。 

例如 : 

<p> 学 习 网 页 设计 ， 主 要 就 是 和 学习 <mark>HTML5</mark>、<mark>CSS3</mark> 和 
<mark>JavaScript</mark>。 </p> 
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HTMLS 中 的 表单 标签 在 实际 布局 的 时 候 和 后 台 动 态 功能 程序 的 开发 是 相对 应 的 ， 一 个 
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网 页 布局 的 好 与 坏 ， 和 表单 标签 有 很 大 关系 。 主 要 的 表 千 标签 如 表 1-3 所 不 。 


表 1-3 表单 标签 


标 3E 功能 描述 
<form> 定义 供用 户 输入 的 HTML 表单 
<input> 定义 输入 控件 
<textarea> 定义 多 行 的 文本 输入 控件 
<button> 定义 按钮 
«select» 定义 选择 列表 〈 下 拉 列 表 ) 
<optgroup> 定义 选择 列表 中 相关 选项 的 组 合 
<option> 定义 选择 列表 中 的 选项 
<label> 定义 input 元 素 的 标注 
<fieldset> 定义 围绕 表单 中 元 素 的 边框 
<legend> 定义 fieldset 元 素 的 标题 
<isindex> 不 赞成 使 用 。 定 义 与 文档 相关 的 可 搜索 索引 
<datalist> 定义 下 拉 列 表 
<keygen> 定义 生成 密 钥 
<output> 定义 输出 的 一 些 类 型 


1. <form> 标 签 

<form> 标 签 创建 供用 户 输入 的 表单 ， 其 属性 如 表 1-4 Brzn 

<form></form> 标 签 对 用 来 表示 创建 一 个 表单 ， 在 标签 对 之 间 的 表单 控件 都 属于 表单 的 
内 容 ， 表 单 可 以 说 是 一 个 单独 的 容器 。 


表 1-4 <form> 标 签 属性 


属 性 Hio x 

action 定义 一 个 URL。 当 单 击 提交 按钮 时 向 这 个 URL 发 送 数据 

data 供 自 动 插入 数据 
replace 定义 表单 提交 时 所 做 的 事情 
accept 处 理 该 表单 的 服务 器 可 正确 处 理 的 内 容 类 型 列表 (用 逗号 分 隔 ) 
accept-charset 表单 数据 的 可 能 的 字符 集 列表 (用 逗号 分 隔 ) ， 默 认 值 是 "unknown" 

enctype 设置 对 表单 内 容 进 行 编码 的 MIME 类 型 

method HFI action URL 发 送 数据 的 HTTP 方法 ， 默 认为 get 

target 在 何 处 打开 目标 URL 


在 表单 <form> 标 签 中 还 可 以 设置 表单 的 基本 属性 ， 包 括 表单 的 名 称 、 处 理 程 序 、 传 送 方 
法 等 。 一 般 情 况 下 ， 表 单 的 处 理 程序 action 和 传送 方法 method 是 必 不 可 少 的 参数 。 

(1) action 属性 

该 属性 用 于 定义 一 个 URL， 当 单 击 提交 按钮 时 间 这 个 URL 发 送 数据 。 真 正 处 理 表单 的 
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数据 脚本 或 程序 在 action 属性 里 ， 这 个 属性 值 可 以 是 程序 或 脚本 的 一 个 完整 URL. 

说 明 : 

在 该 语法 中 ， 表 单 的 处 理 程序 定义 的 是 表单 要 提交 的 地 址 ， 也 就 是 表单 中 收集 到 的 资料 
将 要 传递 的 程序 地 址 。 这 一 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 ， 还 可 以 是 一 些 其 他 的 
地 址 形式 ， 例 如 发 送 E-mail 4. 


«form action="mailto:83560148@qq.com"> </form> 


(2) method 属性 

该 属性 用 于 向 action URL 发 送 数据 的 HTTP 方法 。 

€ method-get: 在 使 用 这 个 设置 时 ， 来 访 者 输入 的 数据 会 附加 在 URL Zu. FH" i 
直接 发 送 至 服务 器 ， 所 以 速度 比 post 快 ， 缺 点 是 数据 长 度 不 能 够 大 长 。 在 没有 指 冠 
method 的 情况 下 一 般 会 视 get 为 默认 值 。 

€ method-post: 在 使 用 这 种 设置 时 ， 表 单数 据 是 与 URL 分 开发 送 的 ， 用 户 闹 的 计算 机 会 
通知 服务 器 来 读 取 数据 ， 所 以 通 第 没有 数据 长 上 度 上 的 限制 ,缺点 是 速度 比 POST 18. 

(3) enctype 属性 

该 属性 设置 对 表单 内 容 进行 编码 的 MIME 类 型 。 

€ text/plain: 以 纯 文 本 的 形式 传送 。 

€ application /x-www-form-urlencoded: 默认 的 编码 形式 。 

€ multipart/form-data MIME: 上 传 文件 的 表单 必须 选择 该 项 。 

(4) target 属性 

target 属性 用 来 指定 目标 窗口 的 打开 方式 。 

€ blank: 将 返回 信息 显示 在 新 打开 的 窗口 中 。 

€ parent: 将 返回 信息 显示 在 父 级 的 浏览 天 窗口 中 。 
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€ top: 将 返回 信息 显示 在 顶级 浏览 器 窗口 中 。 
需要 注意 的 是 ， 在 HTMLS 中 取消 了 name 属性 。 
例如 : 


<form 1d="form"action="#" method="post"> 

<fieldset> 

<legend> 留 言 本 </legend> 

<label for="contactus"> 请 您 留言 : </label> 

«br /> 

«textarea cols-"80" rows-"10" 1d="book" name-"book"- 
«/textarea^ 

«/fieldset^ 


—M —M 


«input type="submit" value-" $42" id-"submit" name-"submit" /> 


«input type-"reset" value-" Œ E" id—"reset" name-"reset" /> 
</form> 


发 布 后 如 网 1-6 所 示 。 


> 
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| = 
mE x VS 
- > Œ fi D file///D//book/DIV*CSS/chap01/book.html vai o oz 
留言 本 


田 
^x => 
请 您 留言 : 


E 


1-6 form 表单 效果 


2. «fieldset^ tA 

Fieldset 标签 可 将 表单 内 的 相关 元 系 分 组 ， 其 属性 如 表 10-5 所 示 。<fieldset> 标 签 将 表单 
内 容 的 一 部 分 打包 ， 生 成 一 组 相关 表单 的 字段 。 当 一 组 表单 元 素 放 到 <fieldsef> 标 签 内 时 ， 浏 
哆 占 会 以 特殊 方式 来 显示 它们 ， 有 特殊 的 边界 、3D 效果 。 


表 1-5 <fieldse 人 标签 属性 


disabled 定义 fieldset 是 否 可 见 
iim 定义 该 fieldset 所 属 的 一 个 或 多 个 表单 
例如 : 


«form id-"namepassword" method="post" action="#"> 
«fieldset 

<legend> 登 录 的 页 面 </legend> 

<label for="username"> 用 户 :</label> 

«input type="text" id-"username" name-"username" /> 
«br /> 

<label for="pass"> 密 人 :</label> 

«input type="password" 1d="pass" name="pass" /> 
</fieldset> 


</form> 


发 布 后 如 图 1-7 所 示 。 


1-7 <fieldse 从 标签 应 用 效果 
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3. <legend> 标 答 

<legend> 标 签 为 <fieldset>、<figure> 以 及 <details> 标 签 定 义 标题 。 

4. <label> 标 答 

<label> 标 签 定义 控件 的 标注 。 如 果 在 label 元 素 内 单 击 文本 就 会 触发 此 控件 。 

for 属性 如 表 1-6 所 示 ， 可 把 label 绑 定 到 另外 一 个 元 素 。 通 剃 把 for 属性 的 值 设置 为 相关 元 
RHI id 属性 的 值 。 
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属 性 f jü 述 


定义 label 针对 哪个 表单 元 素 ， 设 置 为 表单 元 素 的 id。 
注释 : 如 果 此 属性 未 被 规定 ， 那 么 label 会 关联 其 内 容 


for id of another field 


b 


5. «input ti 


<inpu 人 t> 标 签 定 义 输入 字段 ， 用 户 可 在 其 中 输入 数据 。 其 属性 如 表 1-7 所 示 。 


表 1-7 <inpuf> 标 人 签 属性 


"m E -NHE 5NA] MIME 类 型 列表 ， 指 示 文 件 传 输 的 MIME 类 型 。 
p — mme "yp E: 仅 可 与 type="file" 配 合 使 用 
3i T 定义 图 像 的 替代 文本 
ik: 仅 可 与 type="image" 配 合 使 用 
"URN true 当 页 面 加 载 时 ， 使 输入 字段 获得 焦点 
false 注 : type="hidden" 时 无 法 使 用 
P true 指示 此 input 元 素 首次 加 载 时 应 当 被 选中 
false 注 : 请 与 type="checkbox" 及 type="radio" 配 合 使 用 
dissbled true 当 input 元 素 首 次 加 载 时 禁用 此 元 素 ， 这 样 用 户 就 无 法 在 其 中 写 文 本 或 选 定 它 
false 注 : 不 能 与 type="hidden" 一 同 使 用 
t Pz DM > > 
fum 定义 输入 字段 属于 一 个 或 多 个 表单 
— 定义 预期 的 输入 类 型 
list id of a datalist 引用 datalist 元 素 。 如 果 定 义 ， 则 一 个 下 拉 列 表 可 用 于 癌 输 入 字段 插入 值 
ne 定义 文本 域 中 所 允许 的 字符 最 大 数目 
— 指示 是 否 可 修改 该 字段 的 值 
— 定义 当 表单 提交 时 如 何 处 理 该 输入 字段 
pi true 定义 输入 字段 的 值 是 否 为 必需 的 。 当 使 用 下 列 类 型 时 无 法 使 用 : hidden. 
q false image. button, submit, reset 
T url 定义 要 显示 的 网 像 的 url。 
仅 用 于 type="image" 时 
— 定义 一 个 或 多 个 模板 
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CHE) 
属 lE jo X 
button 
checkbox 
date 指示 input 元 素 的 类 型 
datetime 默认 值 是 "text" 
Mc da 注 ， 该 属性 不 是 必需 的 ， 但 我 们 认为 应 该 使 用 它 。text 属性 指 文字 字段 
email e : 
file password: 密 个 域 
hidden radio: PEARCE 
image checkbox: FENE 
P month button: MZE 
typ number submit: 提交 按钮 。 提 交 按 钮 是 一 种 特殊 的 按钮 ， 不 需要 设置 onclick 参数 ， 在 
password 单 击 该 类 按钮 时 可 以 实现 表单 内 容 的 提交 
radio reset: 重 置 按 钮 。 在 页 面 中 还 有 一 种 特殊 的 按钮 ， 称 为 重 置 按钮 。 这 类 按钮 可 
以 用 来 清除 用 户 在 页 面 中 输入 的 信息 
submit image: 图 像 域 
test hidden: 隐藏 域 
time file: 文件 域 
url 
week 
对 于 按钮 、 重 置 按钮 和 确认 按钮 ， 定 义 按钮 上 的 文本 
对 于 图 像 按 钮 ， 定 义 传递 回 某 个 脚本 的 此 域 的 符号 结 
valie vaik 对 于 复 选 框 和 单 选 按 钮 ， 定 义 input 元 素 被 单 击 时 的 结 


对 于 隐藏 域 、 密 人 码 域 以 及 文本 域 ， 定 义 元 素 的 默认 值 
注 : 不 能 与 type="file" 一 同 使 用 。 与 type="checkbox" 和 type="radio" 一 同 使 用 时 
此 元 素 是 必需 的 


例如 : 


«form 1d="form" action="form.php" method="post" enctype="multipart/form-data"> 
<fieldset> 

<legend> 用 户 </legend> 

«input id-"hiddenField" name-"hiddenField" type="hidden" value="hiddenvalue" /> 
<label for="username"> 用 户 :</label> 

«input type="text" id-"username" name-"username" value-"" size-"15" maxlength-"25" /> 
«br /> 

<label for-"pass" 7 45 1 :—/label- 

«input type="password" id-"pass" name-"pass" size-"15" maxlength-"25" /> 
«/fieldset^ 

<fieldset> 

<legend> 性 别 </legend> 

<label for="sex"> 男 </label> 

«input type="radio" value-"1" 1d="sex" name-"sex" /> 

<label for="sex"> 女 </label> 

«input type="radio" value-"2" 1d="sex" name-"sex" /> 

<label for="sex"> 保 密 </label> 

«input type="radio" value-"3" 1d="sex" name-"sex" /> 

«/fieldset^ 

«fieldset 

«legend» Itf «/legend» 

<label for="fav"> 读 书 </label> 

«input type="checkbox" value="1" 1d="fav" name="fav" /> 

<label for="fav"> 旅 游 </label> 
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«input type="checkbox" value-"2" id-"fav" name-"fav" /> 

<label for="fav"> 购 物 </label> 

<input type="checkbox" value="3" 1d="fav" name="fav" /> 

<label for="fav2"> 游 戏 </label> 

<input type="checkbox" value="3" 1d="fav2" name="fav2" /> 
</fieldset> 

<fieldset> 

<legend> 照 片 </legend> 

<label for="myimage"> 照 片上 传 </label> 

«input type-"file" id-"myimage" name-"myimage" size-"35" maxlength-"255" /> 
«/fieldset^ 

<fieldset> 

<legend> 提 区 </legend> 

«input type="submit" value=" 提 区 " id-"submit" name-"submit" /> 


«input type-"reset" value=" 重 置 " id="reset" name-"reset" /> 
</fieldset> 
</form> 


发 布 后 如 网 1-8 所 示 。 
pm 


- > Q fi D file:///D:/book/DIV+CSS/chap01/input.html Ww o 


RP 
RP: | 
密码 : | | 


Ez 
|5 ok o pa 


爱好 
读书 o 旅游 上 购物 上 游戏 O 


照片 

照片 上 传 | 选择 文件 | 未 选择 任何 文件 

提交 一 
提交 | | 重 置 | 
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6. <select tr £ 


在 form 中 使 用 <selec 人 标签 创建 下 拉 列 表 供 用 户 选择 ， 其 属性 如 表 1-8 所 示 。 


表 1-8 <select> 标 签 属性 


autofocus rii 在 页 面 加 载 时 使 这 个 select 字段 获得 焦点 
disabled 当 该 属性 为 tue 时 会 禁用 该 菜单 


um s X. select 字段 所 属 的 一 个 或 多 个 表单 
— 当 该 属性 为 tue 时 规定 可 一 次 选 定 多 个 项 目 
"um 定义 下 拉 列 表 的 唯一 标识 符 
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例如 : 


<form 1d="form" action="#" method="post"> 
<fieldset> 

<legend> 投 票 </legend> 

<label for="select"> 选 项 : </label> 

<br /> 

«select multiple="true" id="select" name="select"> 
<option> 非 党 认真 100 分 </option> 
<option> 比 较 认 真 80 分 </option> 
<option> 很 是 一 般 60 分 </option> 

«option» A% 40 分 </option> 

</select> 

</fieldset> 


</form> 


发 布 后 如 图 1-9 所 示 。 


| C 用 


E 
3I. 


非常 认真 100 分 
比较 认真 加 分 
很 是 一 般 60 分 
真是 差劲 4 分 
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7. <option> 标 签 

<option> 标 签 定义 下 拉 列 表 中 的 一 个 选项 ， 其 属性 如 表 1-9 所 示 。 在 HTMLS H, 
<option> 标 签 也 用 于 新 元 素 <datalis 人 中 。<option> 标 签 能 够 在 不 带 任 何必 性 的 情况 下 使 用 ， 
但 是 通常 需要 value 属性 ， 访 属性 定义 了 发 送 到 服务 器 的 数据 ， 与 <select> 或 <datalist 标 签 结 
合 使 用 。 在 其 他 地 方 <option> 标 签 是 无 意义 的 。 


表 1-9 <option> 标 签 属性 


disabled 规定 此 选项 应 在 首次 加 载 时 被 禁用 
定义 当 使 用 <optgroup> 时 所 使 用 的 标注 
selected 规定 选项 (首次 显示 在 列表 中 时 ) 表现 为 选中 状态 
value 定义 送 往 服务 器 的 选项 值 
例如 : 


<form 1d="form" action="#" method="post"> 
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<fieldset> 
<legend> 网 站 的 栏目 </legend> 
<label for="multipleselect"> 下 拉 列 表 栏 目 ，</label> 
«br /> 
«select 1 
<option> 公 司 首 页 </option> 
<option> 产 品 展示 </option> 
<option> 在 线 服务 </option> 
<option> 在 线 留 言 </option> 
<option> 售 后 服务 </option> 
<option> 产 品 订单 </option> 
<option> 联 系 我 们 </option> 
<option> 企 业 文化 </option> 
</select> 
</fieldset> 
</form> 


发 布 后 如 网 1-10 所 示 。 


- LM 


multipleselect" name-"multipleselect"^ 


bo 


- > Q fi Dfile///D/book/DIV«Czv Bi 


网 站 的 栏目 
EH: 
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8. <optgroup> 标 答 
<optgroup> 标 签 定 义 选项 组 ， 其 属性 如 表 1-10 所 示 。 此 元 素 允许 组 合 选项 ， 当 使 用 一 
个 长 的 选项 列表 时 对 相关 选项 进行 组 合 会 使 处 理 更 加 容易 。 


表 1-10 <optgroup> 标 签 属性 


Te 定义 选项 组 的 标注 
disabled disabled 在 其 首次 加 载 时 禁用 该 选项 组 
例如 : 


E 


«form action-" 7" metho 
<fieldset> 

-legend»35 FEK HJ VF E«/ legend 
<label for-"object" 73/5 E VR FE «label 
«br /> 


post" id="form"> 
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«select multiple-"multiple"id-"object" name-"object"^ 
«optgroup label=" 文 科 "> 

«option value=" 语 文 "> 语文 </option> 

«option value=" 政 治 '"> 政 治 </option> 

«option value=" Jt 1E" 7 18 «/option- 


«option value=" f ^£" —TT^f-/option^ 


«/optgroup^ 

«optgroup label=" 理 科 "> 

«option value=" 数 学 "> 数学 </option> 
«option value=" 物 理 "> 物 理 </option> 
«option value=" 化 学 "> 化 学 </option> 
</optgroup> 

</select> 

</fieldset> 


</form> 


发 布 后 如 图 1-11 所 示 。 


n - 
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图 1-11 


<optgroup> 标 签 应 用 效果 


9. -textarea^ Tz 

<textarea> 标 签 用 于 定义 一 个 文本 区 域 〈textarea， 一 个 多 行 的 文本 输入 区 域 )， 其 属性 如 表 
1-11 所 示 。 用 户 可 在 此 文本 区 域 中 写 文 本 。 在 一 个 文本 区 中 可 输入 无 限 数量 的 文本 ， 文 本 区 中 的 
默认 字体 是 等 宽 字 体 Cfixed pitch). 


表 1-11 <textarea> 标 签 属性 


ot 在 页 面 加 载 时 使 这 个 textarea 获得 焦点 
cols 规定 文本 区 内 可 见 的 列 数 
disabled 当 此 文本 区 首次 加 载 时 禁用 此 文本 区 
mm 定义 该 textarea 所 属 的 一 个 或 多 个 表单 
inputmode 定义 该 textarea 所 期 望 的 输入 类 型 
pue 为 此 文本 区 规定 的 一 个 名 称 
an 指示 用 户 无 法 修改 文本 区 内 的 内 容 
— 定义 为 了 提交 该 表单 ， 该 textarea 的 值 是 否 为 必需 的 
— 规定 文本 区 内 可 见 的 行 数 
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例如 : 
<form 1d="form" action="#" method="post"> 
<fieldset> 
<legend> 请 您 留言 </legend> 5 
<label for="contactus"> 留 言 内 容 : </label> 
<br /> 


<textarea cols="80" rows-"10" 1d="contant" name="contant"> 
</textarea> 

</fieldset> 

«input type="submit" value=" 提 人 交 " id="submit" name-"submit" /> 
«input type-"reset" value-" Œ E" id="reset" name="reset" /> 
</form> 


发 布 后 如 图 1-12 所 示 。 


D 无 标题 文档 x V 
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图 1-12 “<textarea> 标 签 应 用 效果 


10. <button> 标 签 

<button> 标 签 定义 按钮 ， 可 以 在 button 元 素 中 放置 内 容 ， 例 如 文本 或 图 像 ， 这 是 该 元 素 
与 通过 input 元 素 创 建 的 按钮 的 不 同 之 处 。 其 属性 如 表 1-12 所 示 。 

通常 始终 为 按钮 规定 type 属性 。 不 同 的 浏览 器 根据 type 属性 使 用 不 同 的 默认 值 。 如 果 
在 HTML 表单 中 使 用 button 元 素 ， 不 同 的 浏览 右 会 提交 不 同 的 按钮 值 。 一 般 使 用 input 7628 
在 HTML 表单 中 创建 按钮 。 


表 1-12 <button> 标 签 属性 


abane 如 果 设 置 ， 则 当 页 面 加 载 后 使 按钮 获得 焦点 
disabled 禁用 按钮 
oe 规定 按钮 属于 哪个 表单 


formactionNew 规定 当 提交 表单 时 向 何 处 提交 表单 数据 ， 以 及 覆盖 表单 的 action 属性 
f XE TE K ER. 2C c 325 BI c o d Zo B LIRE XETI dd, DAS TS zs de CIT 
ormenctypeNew 

enctype 属性 


delete 


get 


formmethodNew Po Axe n Axe ERES. ULT nde RIT method 属性 


put 
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CAE) 
formnovalidateNew 如 果 设 置 ， 指 示 是 否 在 提交 时 验证 表单 ， 以 及 履 盖 表单 的 novalidate 属性 
formtargetNew 规定 在 何 处 打开 action 中 的 URL, ELA TE TREHI target 属性 
_top 
framename 
button 
type reset 定义 按钮 的 类 型 
submit 


value 规定 按钮 的 初始 值 ， 可 由 脚本 进行 修改 
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frameset, frame. noframes XX —- Ek 5 HA Jag n Ze LR S8 B E ERR BEI IR Jg 
WK 1-13 所 示 。 但 HTMLS 中 不 再 支持 frame 框架 ， 只 支持 iframe 框架 ， 或 者 用 服务 器 方 创 
建 的 由 多 个 页 面 组 成 的 符合 页 面 的 形式 删除 以 上 这 三 个 标签 。 


表 1-13 框架 标签 


标 5 功能 描述 
<frame> 定义 框架 集 的 窗口 或 框架 

<frameset> 定义 框架 集 

<noframes> 定义 针对 不 文 持 框架 的 用 户 的 替代 内 容 
<iframe> 定义 内 联 框架 


L0 RRE 


网 页 主要 由 图 片 和 文学 组 成 ， 对 图 片 的 应 用 标签 主要 有 img. map. area. canvas. 
figcation、figure 这 6 个 ， 其 中 canvas、figcation、figure 是 HTMLS5 的 新 标签 ， 这 些 标 签 的 功 
能 如 表 1-14 所 示 。 


表 1-14 图 像 标签 


标 8 功能 描述 
<img> 定义 图 像 
<map> 定义 图 像 映 射 
<area> 定义 图 像 地 图 内 部 的 区 域 
<canvas> 定义 图 形 
<figcaption> 定义 figure 元 素 的 标题 
<figure> 定义 媒介 内 容 的 分 组 以 及 它们 的 标题 


1. 图 像 <img> 
<img> 标 签 用 于 定义 HTML 页 面 中 的 图 像 。 图 像 并 不 会 插入 HTML 页 和 面 中 ， 而 是 链接 
到 HTML 页 面 上 。 
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<img> 的 属性 : 

@ sc: VUE URL. 

e alt: 规定 网 像 的 奉 代 文本 。 

e width: 图 像 的 宽度 。 C 
© height: EIE. 

请 注意 : 不 要 通过 height 和 width 属性 来 缩放 图 像 。 

例如 : 


«img src-"image/logo.jpg" width="200" height="200" alt=" 网 站 logo" title=" 网 站 logo" /> 

图 像 可 作为 链接 

«ahref-"http://www.baidu.com" target=" blank"^«img src-"image/logo.jpg" width="200" height="200" 
alt=" 网 站 logo" /></a> 


2. 图 像 映 射 <map>、<area> 

€ <map> E LEZIJ, KREI] 〈image-map) 指 带 有 可 单 击 区 域 的 一 幅 图 像 。 

€ <area> 定 义 疼 像 映 射 中 的 区 域 。area 76 287K X6 ICE map 元 素 内 部 ，area 元 素 可 定义 
图 像 映 射 中 的 区 域 。 

例如 : 


—M 


«img src-"image/banner.jpg" width-" 800" height-"200" border-"0" usemap-" Map" 
«map name-"Map"^ 

«area shape="rect" coords-"203,22,377,52" href-" 1.html"> 

«area shape="rect" coords-"142,76,321,105" href-"2.html" 

«area shape="rect" coords-"121,126,216,157" href-"3.html"» 

«area shape="rect" coords-"12,152,92,183" href="4.html"> 

«area shape -"circle" coords 7"35,60,40" href —"5.html" 


</map> 


3. <figure>, <figcaption> 标 签 

e <figure> 定 义 媒介 内 容 的 分 组 以 及 它们 的 标题 。 标 签 规定 独 立 的 流 内 容 CEPR. B 
表 、 照 片 、 代 码 等 )， 元 素 的 内 容 应 该 与 主 内 容 相 关 ， 但 如 果 被 删除 ， 则 不 应 对 文档 
流产 生 影 啊 。 

© <figcaption> 标 签 定义 figure JUR HIER. figcaption 应 该 被 置 于 figure 元 素 的 第 1 个 
或 最 后 一 个 子 元 际 的 位 置 。 

例如 : 


<figure> 
<figcaption> 主 要 浏览 右 的 图 标 </figcaption> 


—M 


«img src-"image/chrome.png" alt-"chrome" /> 
«img src-"image/FireFox.png" alt-"FireFox" /> 


«img src-"image/IE.png" alt-"IE" /> 


«img src-"image/Opera.png" alt-"Opera" /> 


—M 


«img src-"image/Safari.png" alt-" Safari" /> 
</figure> 
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4. <canvas> 标 和 俭 

<canvas></canvas> 是 HTML5 中 出 现 的 新 标签 ， 和 所 有 的 dom 对 象 一 样 它 有 上 自己 的 属 
性 、 方 法 和 事件 ， 其 中 包括 绘图 的 方法 ，JavaScript 能 够 调用 它 来 进行 给 

大 多 数 Canvas 绘图 API 都 没有 定义 在 <canvas> 元 和 上 ， 而 是 定义 在 通过 画布 的 
getContext0 方 法 获得 的 一 个 “ 绘 独 环境” 对象 上 。Canvas API 也 使 用 了 路 径 的 表示 法 。 但 路 
径 是 由 一 系列 的 方法 调用 来 定义 的 ， 而 不 是 摘 述 为 字母 和 数字 的 字符 串 ， 例 如 调用 
beginPathO0 和 arc(0) 方 法 。 一 旦 定义 了 路 径 ， 其 他 的 方法 “如 flo 都 是 对 此 路 径 进 行 操作 。 
绘图 环境 的 各 种 属性 (例如 fillStyle) 说 明了 这 些 操作 如 何 使 用 。 

在 使 用 canvas 元 素 绘制 图 像 的 时 候 有 下 面 两 种 方法 。 

€ context.fill0: HHF. 

€ context.stroke(): 绘制 边框 。 

在 进行 网 形 的 绘制 前 要 设置 好 绘 狗 的 样 坯 。 

€ context.fillStyle: 填充 的 样式 。 

€ context.strokeStyle: 边框 样式 。 

€ context.lineWidth: 网 形 边 框 宽度 。 

颜色 的 表示 方式 如 下 。 

e 直接 用 颜色 名 称 : "red", "green", "blue". 

e 十 入 进 制 颜色 值 : "#EEEEFF". 

€ rgb(1-255,1-255,1-255)。 

€ rgba(1-255,1-255,1-255, 透 明度 )。 

例如 : 


<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
</head> 
<style type="text/css"> 
canvas {border:dashed 2px #CCC} 
</style> 
<script type="text/javascript"> 
function $$(id){ 
return document.getElementById(id); 
j 
function pageLoad()( 
var can = $$('can'); 
var cans = can.getContext('2d'); 
cans.beginPath(); 
cans.arc(200,150,100,0, Math. PI/2,true); 
cans.closePath(); 
cans.fillStyle = 'blue"; 
cans.fill(); 


</script> 
<body onload="pageLoad();"> 
<canvas id="can" width="400px" height="300px">4</canvas> 
</body> 
</html> 


发 布 后 如 网 1-13 所 示 。 
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首 / 视 频 标签 
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HTML 早期 的 版 本 需要 使 用 <embed> 和 <objec 马 标签， 为 了 它们 能 正确 播放 必须 赋予 一 


表 1-15 音 /视频 标签 


标 5 功能 描述 
<audio> 定义 声音 内 容 

«source 定义 媒介 源 
<track> 定义 用 在 媒体 播放 器 中 的 文本 轨道 

<video> 定义 视频 


1. <audio> 标 答 


大 堆 的 参数 ， 巡 体 标签 将 会 非常 复 淋 。 现 在 的 视频 和 首 频 可 以 通过 HTMLS 标签 <video> 和 
<audio> 来 访问 资源 。 而 且 HTMLS 视频 和 音频 标签 基本 上 将 它们 视 为 图 片 ， 即 <video 
src=">。 其 他 参数 〈 例 如 宽度 、 高 度 或 者 目 动 播放 ) 只 需要 像 其 他 HTML 标签 一 样 定义 。 

各 用 的 音 / 视 频 标 俭 如 表 1-15 所 未 。 


HTMLS 中 audio 标签 文 持 3 种 格式 的 音频 ， 分 别 是 WAV、MP3 和 Ogg 格式 。 在 


—M 


«audio src-"song.ogg" controls-"controls"^«/audio^ 


HTMLS 标准 网 页 里 面 可 以 运用 audio 标签 来 完成 对 声音 的 调用 及 播放 ， 以 下 是 最 经 常见 到 
的 运用 HTMLS 的 3 种 基本 格式 。 


YES HTMLS:CSS:JavaScript miiihAam — 


2) HAERES ERE) T I: 


-E EA 


«audio src controls" 


AR BS Xs A LETAP TE IREI e 
</audio> 


3) 尽量 兼容 浏览 器 的 写法 : 


song.ogg" controls 


EA 


«audio controls-"controls"^ 


—M 


«source src= 


—M 


song.ogg" type-"audio/ogg"- 
song.mp3" type 


—WM 


你 的 浏览 器 不 文 持 这 种 格式 的 播放 。 
</audio> 


€ autoplay: 唯一 可 选 值 为 autoplay， 当 出 现 autoplay 属性 并 准确 赋值 时 音频 将 会 目 动 播放 。 

€ controls: 唯一 可 选 值 为 controls， 当 出 现 controls 属性 并 准确 赋值 时 音频 播放 控件 将 会 
ER, PFE BE EM EE CEU Ea MRH S R 
可 用 )。 

€ loop: 唯一 可 选 值 为 loop， 当 出 现 loop 属性 并 准确 赋值 时 音频 将 会 循环 播放 。 

€ preload: 可 选 值 有 auto《〈 当 页 面 加 载 后 载 入 整个 音频 )、meta《〈 当 页 面 加 载 后 只 载 入 
元 数据 ) 和 none《〈 当 页 面 加 载 后 不 载 入 音频 )， 如 果 设 置 了 前 面 的 autoplay 属性 ， 那 
么 preload 将 会 被 忽略 。 

€ sc: 指定 音频 URL 地 址 ， 可 以 是 相对 的 URL 也 可 以 是 绝对 的 URL， 还 可 用 source 
标签 来 指定 源 。 

2. <video> 标 签 

HTMLS 能 在 完全 脱离 插件 的 情况 下 播放 音 /视频 ， 但 不 是 所 有 的 格式 都 支持 。HTML5 

文 持 的 视频 格式 如 下 。 

€ Ogg: 市 有 Theora 视频 编码 +Vorbis 首 频 编 公 的 Ogg 文件 ; 

€ MEPG4: 带 有 H.264 视频 编码 +AAC 音频 编码 的 MPEG4 文件 ; 

€ WebM: 市 有 VP8 视频 编码 +Vorbis 首 频 编码 的 WebM 格式 。 

标签 的 使 用 : 


«video src=" 文 件 地 址 " controls="controls"></video> 

只 有 了 IE9 以 上 才 支 持 HTML5， 对 于 不 支持 的 浏览 占 应 该 有 友好 的 提示 : 
«video Src=" 文 件 地 址 " controls="controls"> 

您 的 浏览 右 暂 不 文 持 video 标签 。 
</ video > 


例如 : 


<!doctype html> 


EA 


audio/mpeg"- 
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<html> 

<head> 

«meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

«video controls id="video"> 


«source src-"testvideo.mp4" type-"video/mp4"- 
«/video» 
«br /> 
«button onClick-"bofang()" 1f «/button- 
«button onClick-"zanting()" — 7I f; «—/button- 
«button onClick-"kuaijin() — Pit«-/button- 
«button onClick-"kuaitui() — POE «/button» 
«button onClick-"jingyin(this)" 5$ 71 «/button 
«button onClick="jiansuO"> 减 速 </button> 
«button onClick="jiasu0"> 加 速 </button> 
«button onClick-"normal()"—1E 7i: 8 JC «/button? 
«button onClick="upO'"> 增 大 音量 </button> 
«button onClick="downO0'"> 减 小 音量 </button> 
«script^ 
/获取 对 应 的 video 标签 
var video = document.getElementById('video); 


/播放 方法 
function bofang(){ 
video.play(); 


/ 暂 俘 方法 
function zanting() 
video.pause(); 


/ 快 进 按钮 
function kualjin(){ 
video.currentTime-—10;//currentTime 属性 获取 当前 播放 的 时 间 ， 加 上 10 是 指 快 进 10 


秒 
} 
// 快 退 
function kuaitui(){ 


video.currentTime-=10; 


/静音 
function jingyin(obj) 


if( video.muted)( 
obj.innerHTML-' Sf E 
video.muted-false; 

lelsei 
obj.innerHTML- X BJERCES s 


video.muted-true; 


/减速 播放 

function jiansu(){ 
video.playbackRate = 1/3; 

j 

/加 速 播放 

function jiasu()1 
video.playbackRate-3; 

j 

IAE REN 

function normal()( 
video.playbackRate-1; 


/ 调 大 音量 ， 音 量 值 的 范围 是 0 到 1 
function up()1 
video.volume-*-0.2; 
j 
// 调 小 声音 
function down()1 
video.volume--0.2; 
j 
</script> 
</body> 
</html> 


发 布 后 如 图 1-14 所 示 。 
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| 播放 | | 暂 信 | | 快 进 | | 快 退 | | 静音 | | 减速 | | 加 速 | | 正常 播放 | | 增 大 音量 | | 减 小 音量 | 


1-14 <video> 标 签 应 用 效果 
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Ef 接 标签 。 


网 页 的 超 链 接 可 以 是 一 个 学 、 一 个 词 或 者 一 组 词 ， 也 可 以 是 一 幅 图 像 ， 用 户 可 以 单 击 这 


些 内 容 跳 转 到 新 的 文档 或 者 当前 文档 中 的 某 个 部 分 。 当 把 鼠标 指针 移动 到 网 页 中 的 某 个 链接 
上 时 第 头 会 变 为 一 只 小 手 的 形状 ， 一 般 通 过 使 用 <a> 标 签 在 HTML 中 创建 链接 。<link> 标 签 
定义 两 个 链接 文档 之 间 的 关系 。<nav> 标 签 定 义 导 航 链 接 的 部 分 ，<nav> 标 签 是 HIMLS 中 的 
新 标签 ， 如 表 1-16 所 示 。 


表 1-16 链接 标签 


标 5 功能 描述 

<a> 定义 销 

<link> 定义 文档 与 外 部 资源 的 关系 

<nav> 定义 导航 链接 


1. 链接 标签 <a> 

<a> 标 签 定义 超 链接 ， 用 于 从 一 张 页 面 链接 到 另 一 张 页 面 。 
<a> 元 素 最 重要 的 属性 是 href 属性 ， 它 指示 链接 的 目标 。 

e href 属性 : 表示 链接 的 目标 URL 

€ target 属性 : 表示 打开 链接 的 窗口 ， 当 值 为 blank 时 表示 打开 新 窗口 。 
在 所 有 浏览 器 中 链接 的 默认 外 观 如 下 : 

e 未 被 访 问 的 链接 市 有 下 划 线 而 且 是 监 色 的 ; 

e 已 被 访问 的 链接 带 有 下 划 线 而 且 是 系 色 的 ; 

@ 活动 链接 市 有 下 划 线 而 且 是 红色 的 。 

例如 : 


«a href-"http://www.baidu.com" target-" blank"> 百 上 度 链接 </a> 


当然 ， 也 可 以 链接 到 本 网 页 的 其 他 位 置 。 
例如 : 


AA q 二 


«a href-2"Zabc"»578 1 </a> 


AM 1 


<a id="abc"> £, 1 g«/a- 


2. 链接 文档 标签 <link> 

link 标签 通常 放置 在 一 个 网 页 的 头 部 标签 head 内 ， 用 于 链接 外 部 CSS 文件 、 链 接收 藏 
夹 图 标 (favicon.ico), «linke 标签 最 第 见 的 用 途 是 链接 外 部 样式 表 、 外 部 资源 。 

例如 : 


<link rel-"icon" href-"favicon.ico" type-"image/x-icon" /> 


对 link 标签 的 内 容 解 释 如 下 : 
e href 值 为 外 部 资源 地 址 ， 这 里 是 收藏 夹 图 标 地 址 ; 


e rel 定义 当前 文档 与 被 链接 文档 之 间 的 关系 ， 这 里 是 外 部 icon 图 标 属性 ; 

€ type 规定 被 链接 文档 的 MIME 类 ， 这 里 是 值 为 image/x-icon. 

3. 导 币 链接 标签 <nav> 

HTMLS 中 的 新 元 素 标 签 <nav> 用 来 将 上 共有 导航 性 质 的 链接 划分 在 一 起 ， 使 代码 结构 在 语 
义 化 方面 更 加 准确 ， 同 时 对 于 屏 硕 阅读 占 等 设备 的 文 持 更 好 。 一 直 以 来 ， 我 们 习惯 于 使 用 形 
如 <div id="nav"> 或 <ul id="nav"> 的 代 但 来 号 页 面 的 导航 ， 在 HTMLS 中 可 以 直接 将 导航 链接 
列表 放 到 <nav> 标 签 中 。 

nav 元 素 是 一 个 可 以 用 来 作为 页 面 导航 的 链接 组 ， 其 中 的 导航 元 素 链 接 到 其 他 页 面 或 当 
前 页 和 面 的 其 他 部 分 ， 并 不 是 所 有 的 链接 组 都 要 放 进 <nav> 元 素 。 例 如 ， 在 页 脚 中 通常 会 有 一 
组 链接 ， 包 括 服 务 条 球 、 首 页 、 版 权 声 明 等 ， 这 时 使 用 <footer> 元 素 是 最 恰当 的 ， 而 不 需要 
使 用 <nav> 元 素 。 

例如 : 


<nav> 

«ul» 

<li><a href-"index.html" # Ji «/a»«/li» 
<li><a href-"/about/"»2& FRM ]«/a»«/li» 
<li><a href-"/blog/" 182 16 Ez «/a»«/li 
</ul> 


</nav> 
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网 页 的 列表 标签 分 为 <ol> 有 序列 表 和 <ul> 无 序列 表 两 大 类 ， 其 中 的 <menu> 和 
<menuitem> 是 HIMLS 的 新 标签 ， 可 以 配对 使 用 ， 用 来 定义 这 单 / 列 表 ， 所 有 的 列表 标签 如 表 
1-17 所 示 。 


表 1-17 列表 标签 


标 签 功能 描述 
<ul> 定义 无 序列 表 
<ol> 定义 有 序列 表 
<li> 定义 列表 的 项 目 
<dir> 不 赞成 使 用 。 定 义 目 录 列 表 
<dl> 定义 定义 列表 
<dt> 定义 定义 列表 中 的 项 目 
<dd> 定义 定义 列表 中 项 目的 描述 
<menu> 定义 命令 的 沫 单 / 列 表 
<menuitem> 定义 用 户 可 以 从 弹出 荣 单 中 调用 的 命令 /菜单 项 目 
<command> 定义 命令 按钮 


1. 有 序列 表 <ol>...<li> 
<ol> 和 定义 有 序列 表 。 在 HTML4.01 中 ol 元 素 的 "compact"、"start" 以 及 "type" 属 性 是 不 推 


存 使 用 的 。 
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<1i> 定 义 列 表 的 项 目 。 在 HIML4.01 中 开元 素 的 "type" 和 "value" 属 性 是 不 推荐 使 用 的 。 


例如 : 


<ol> 


<]i> 第 一 频道 </li> 


<] 这 第 二 频道 </1i> 


<] 谊 第 三 频道 </li> 
<li>% pA </i> 


</ol> 


对 于 ol 元 素 ， 有 以 下 两 个 属性 。 
e start 属性 : 规定 起 始 数字 ， 如 start = "5"; 


> 


e type 属性 ， 属性 值 为 1、a、A、i、I， 表 示 序号 的 样式 ， 在 HTMLS 中 取消 了 这 个 
属性 。 


HTMLS 新 增 的 属性 reversed 表示 将 序号 反 转 ， 即 按 降 序 显 示 序 号 。 


例如 : 


«ol type="a" start=3> 


<]i> 第 一 频道 </1i> 
<]i> 第 二 频道 </1i> 
<]i> 第 三 频道 </li> 


<]i> 第 四 频道 </li> 


</ol> 


2. 无 序列 表 <ul>...<li> 


<ul> 定 义 无 厅 列表 。 经 第 被 用 于 网 站 的 导航 六 单列 表 。 在 HIML4.01 "P ul 元 又 的 


"compact" 和 和 "type" 属 性 是 不 推荐 使 用 的 。 


例如 : 


«ul» 


<] 这 网 站 首页 </i> 
<]i> 产 品 展示 </Li> 
«li £n) ot li 
«Ii» AREA] 


</ul> 


3. 定义 列表 <dl>...<dt>...<dd> 
<dl > 标签 定义 一 个 定义 列表 。 


<dl> 标 签 用 于 结合 <dt> (定义 列表 中 的 项 目 ) 和 <dd> 《描述 列表 中 的 项 目 )。 


例如 : 


«dl» 


<dt>% —3:«/dt» 
<dd> 第 一 节 内 容 </dd> 
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<dd> 第 二 节 内 容 </dd> 
<df> 第 二 章 </dt> 

<dd> 第 一 节 内 容 </dd> 

<dd> 第 二 节 内 容 </dd> 


</dl> 


UL RIRA 


在 早期 的 网 页 布局 中 ， 主 要 是 使 用 表格 进行 布局 的 。 在 使 用 DIV+CSS 之 后 表格 布局 网 


页 已 经 退出 了 历史 舞台 ， 但 在 网 页 制作 过 程 中 会 经 第 涉及 表格 的 制作 与 设计 ， 这 里 我 们 学 习 
一 下 和 常用 的 表格 标签 ， 如 表 1-18 Br. 


表 1-18 列表 标签 


标 508 功能 描述 
<table> 定义 表格 
<caption> 定义 表格 标题 
«th» 定义 表格 中 的 表 头 单元 格 
<tr> 定义 表格 中 的 行 
«td» 定义 表格 中 的 单元 
<thead> 定义 表格 中 的 表 头 内 容 
<tbody> 定义 表格 中 的 主体 内 容 
<tfoot> 定义 表格 中 的 表 注 内 容 〈 脚 注 ) 
<col> 定义 表格 中 一 个 或 多 个 列 的 属性 值 
<colgroup> 定义 表格 中 供 格式 化 的 列 组 


1. 表格 <table>...<tr>...<td> 

table 的 属性 如 下 。 

€ border: 在 HTMLA.01 中 border 表示 表格 边框 的 宽度 。 在 HTMLS 中 border 属性 仅 用 
于 指示 表格 是 否 用 于 布局 ， 且 只 人 允许 属性 值 "UU 或 "1"。 

€ cellspacing: 规定 单元 格 之 间 的 空白 。HTMLS 中 不 文 持 。 

€ cellpadding: 规定 单元 边沿 与 其 内 容 之 则 的 空 日 。HTMLS5 中 不 文 持 。 

e align: 设置 表格 的 居中 显示 。HTML4.01 中 不 推荐 使 用 ，HTMLS5 中 不 支持 。 

€ bgcolor: 设置 表格 的 背景 套色 。HTML4.01 中 不 推荐 使 用 ，HTMLS5 中 不 文 持 。 

© width: 表格 的 宽度 。HTMLS 中 不 支持 。 

<tr> 定 义 表格 中 的 行 。 

tr 的 属性 如 下 。 

e align: 定义 表格 行 的 内 容 对 齐 方式 。HTML5 中 不 支持 。 

@ valign: 规定 表格 行 中 内 容 的 垂直 对 齐 方式 。HTMLS5 中 不 支持 。 

€ bgcolor: 设置 表格 行 的 背景 颜色 。HTML4.01 中 不 推荐 使 用 ，HTMLS 中 不 支持 。 

<td> 定 义 表格 单元 。 
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td 的 属性 如 下 。 
@ align: 规定 单元 格 内 容 的 水 平 对 齐 方式 。HTMLS5 中 不 文 持 。 
bgcolor: 规定 单元 格 的 背景 颜色 。HTML4.01 中 不 推荐 使 用 ，HTMLS 中 不 支持 。 
height: 规定 表格 单元 格 的 高 度 。HTML4.01 中 不 推荐 使 用 ，HTMLS 中 不 支持 。 
width: 规定 表格 单元 格 的 宽度 。HTML4.01 中 不 推荐 使 用 ，HTMLS 中 不 支持 。 
valign: 规定 单元 格 内 容 的 垂直 排列 方式 。HTML5S 中 不 文 持 。 
colspan: 规定 此 单元 格 可 村 路 的 列 数 。 

€ rowspan: 规定 此 单元 格 可 模 跨 的 行 数 。 

2. 表格 中 的 <th>、<caption> 标 签 

<th> 定 义 表格 中 的 表 头 单元 格 。 

也 基本 上 和 td 一 样 。 

e th 元 系 中 的 文本 呈现 为 粗 体 并 且 居 中 。 

€ td 元 素 中 的 文本 是 普通 的 左 对 章 文本 。 

<caption> 标 签 定 义 表格 的 标题 。 

<caption> 标 签 必 须 直 接 放 到 <table> 标 签 之 后 。 每 个 表格 只 能 规定 一 个 标题 ， 通 常 标 题 会 
居中 显示 在 表格 上 方 。 

3. 表格 的 分 组 <thead>、<tbody>、<tfoot> 

@ <tbody> 定 义 表格 的 主体 。 

@ <thead> 定 义 表格 的 表 头 。 

€ <tfoof> 定 义 表 格 的 脚注 。 

thead 7623 V. 1A tbody 和 tfoot 元 素 结合 起 来 使 用 。 

4. 表格 中 的 按 列 分 组 <colgroup>、<co> 

<colgroup> 标 签 用 于 对 表格 中 的 列 进行 组 合 ， 以 便 对 其 进行 格式 化 。 

<col> 标 签 为 表格 中 的 一 个 或 多 个 列 定 义 属 性 值 。 

属性 span 定义 <colgroup> 或 <col> 应 当 模 路 的 列 数 。 

通过 使 用 <colgroup> 和 <col> 标 签 可 以 问 整 个 列 应 用 样式 ， 而 不 需要 重复 为 每 个 单元 格 或 
每 一 行 设置 样式 。 如 果 用 户 布 望 为 多 个 表格 列 规定 不 同 的 属性 值 ， 可 以 使 用 <col> 元 素 。 
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样式 / 节 标 签 是 网 页 布局 中 经 党 使 用 的 基础 标签 ， 如 表 1-19 所 示 。 其 中 <div> 标 签 更 是 经 
常 使 用 的 ， 这 里 先 介 绍 一 下 各 标签 的 基础 用 法 ， 具 体 的 DIV+CSS 将 在 第 3 章 中 介绍 。 


表 1-19 样式 / 节 标 签 


标 签 功能 描述 
<style> 定义 文档 的 样式 信息 

<div> 定义 文档 中 的 节 

<span> 定义 文档 中 的 市 


<header> 定义 section 或 page 的 页 丑 
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(BE) 
标 S Jj fe Tí xh 
«footer» 定义 section 或 page 的 页 脚 
«section» 4E. X. section 
«article 定义 文章 
<aside> 定义 页 面 内 容 之 外 的 内 容 
<details> 定义 元 聚 的 细节 
<dialog> 定义 对 话 框 或 窗口 
<summary> 为 <details> 元 素 定 义 可 见 的 标题 


1，<div> 标 俭 

<div> 可 定义 文档 中 的 分 区 或 季 《division/section )。<div> 标 签 可 以 把 文档 分 割 为 独立 
的 、 不 同 的 部 分 。 它 可 以 用 作 严 格 的 组 织 工 具 ， 并 且 不 使 用 任何 格式 与 其 关联 。 

如 条 用 id 或 class 来 标记 <div>， 那 么 该 标签 的 作用 会 变 得 更 加 有 效 。 

<div> 是 一 个 块 级 元 素 ， 这 意味 看 它 的 内 容 目 动 地 开始 一 个 新 行 。 实 际 上 ， 换 行 是 
<div> 回 有 的 唯一 格式 表现 ， 可 以 通过 <div> 的 class 或 id 应 用 额外 的 样式 。 用 户 没 有 必要 为 
每 一 个 <div> 都 加 上 类 或 id， 虽 然 这 样 做 也 有 一 定 的 好 处 。 

用 户 可 以 对 同一 个 <div> 元 素 应 用 class 或 id 属性 ， 更 常见 的 情况 是 只 应 用 其 中 一 种 。 这 
两 者 的 主要 差异 是 class 用 于 元 素 组 〈 关 似 的 元 素 ， 可 以 理解 为 茶 一 类 元 素 )， 而 id 用 于 标 
识 单 独 的 、 唯 一 的 元 素 。 

2. HTMLS 文档 结构 组 成 标签 <header>、<article>、<aside>、<footer> 

HTMLS 可 以 让 很 多 更 语义 化 的 结构 化 代 人 码 标签 代 蕉 大 量 的 、 无 意义 的 div 标签 。 这 种 语 
义 化 的 特性 不 仅 提 升 了 网 页 的 质量 和 语义 ， 并 且 减 少 了 以 前 用 于 CSS 调用 的 class 和 id 属性 。 

HTMLS 常用 的 结构 标签 如 下 : 


Header. nav、body、article、section、aside、hgroup、figure、figcaption、footer 


<article> 标 签 定义 外 部 的 内 容 ， 可 以 是 一 访 狐 的 文革 。 

<aside> 标 签 定义 article 以 外 的 内 容 ，aside 的 内 容 可 用 作文 章 的 侧 边 栏 。 

<figcaption> 标 签 定 义 figure 元 系 的 标题 。 

<figure> 标 签 用 于 对 元 素 进 行 组 合 ， 可 以 使 用 figcaption 元 系 为 元 系 组 添加 标题 。 

<footer 标 签 定 义 section 或 文档 的 页 脚 。 

<header> 标 签 定 义 文 档 的 页 眉 。 

<hgroup> 标 签 用 于 对 section 或 网 页 的 标题 进行 组 合 ， 可 以 使 用 figcaption 7628 29 2638 
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€ <nav> 标 签 定 义 导 航 链 接 的 部 分 。 

€ <Ssection> 标 签 定义 文档 中 的 和 (〈section、 区 段 )， 例 如 章节 有 、 页 眉 、 页 脚 或 文档 中 的 
其 他 部 分 。 

<time> 标 签 定 义 日 期 或 时 间 ， 或 者 定义 两 者 。 

例如 : 


HTML5 基 础 知识 


<!doctype html> 

<html> 

<head> 

<meta charset = "utf-8"> 

<title>HTM15 结构 标签 让 页 面 布局 更 语义 化 </title> 


<style> 
body,div {margin:0px;padding:0px;} 
.clear:after[visibility:hidden; display:block;font-size:0; content:"."; clear:both; height:0;} T 


html .clear (zoom: 1;clear:both; ) 
*'first-child--html .clear (zoom: 1;clear:both;) 
.clear{ zoom:1; clear:both; } 

header 

border:1px solid green; 

margin:5px auto; 

width:8096; 

height: 100px; 

background:#abcdef,; } 

header nav { 

border: 1px solid black; 

height: 100px; 

line-height: 100px 

;text-align:center; 

font-size:30px; 

color:green;j 

container | border: 1 px solid green; 
width:8096; 

height:auto; 

margin:5px auto; 

background:#abcdef,; } 

.container section {width:65%;border: 1px solid black; 
height:450px;text-align:center;font-size:30px; 
color:green;line-height:450px; 

float:left; 

background:#abcdef,; } 

.container aside {width:32%;border: 1px solid black; 
height:450px;line-height:450px;text-align:center; 
font-size:30px;color:green; 

float:right; 

background:#abcdef,; } 

footer{border: 1px solid green;width:80%; 
height: 100px;line-height: 100px; 
text-align:center;font-size:30px;color: green; 
margin:5px auto; 

background:#abcdef,; } 

</style> 

</head> 

<body> 

<header> 
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<nav>header</nav> 
</header> 

«div class="container clear"> 
<section>section</section> 
<aside>aside</aside> 

</div> 

<footer> footer</footer> 
</body> 

</html> 


发 布 后 如 图 1-15 所 示 。 
J D HTM15 结 构 标签 让 页 面 布 x 


Q fi D file:///D:/book/DIV+CSS/chap01/index.html as B 


1-15 HTMLS 结构 标签 布局 效果 


13.1 


除了 前 面 介绍 的 title 元 素 外 ， 在 head 元 素 内 还 可 以 定义 其 他 元 素 ， 例 如 meta. head. 
base 等 元 信息 标签 ， 如 表 1-20 所 示 。 这 些 元 系 所 发 挥 的 作用 虽然 不 各 通过 浏览 器 被 看 到 ， 但 
是 对 于 正确 地 浏览 网 页 却 十 分 重要 ， 而 且 可 以 轻松 地 实现 特定 的 功能 ， 因 此 需要 对 其 有 一 定 
的 了 解 。 


标 8 功能 描述 
<head> 定义 关于 文档 的 信息 
<meta> 定义 关于 HTML 文档 的 元 信息 
<base> 定义 页 面 中 所 有 链接 的 默认 地 址 或 默认 日 标 

<basefont> 不 推荐 使 用 。 定 义 页 面 中 文本 的 默认 字体、 颜色 或 尺寸 


1. <head> 和 和 <meta> 标 签 


meta 《元 数据 ， 用 来 描述 HTML 文档 的 信息 。 它 使 用 meta 元 素 完 成 此 工作 ，meta 元 素 
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位 于 <head></head> 标 签 对 内 。 

元 数据 使 用 关键 字 来 描述 ， 每 一 个 关键 字 表 示 一 个 元 数据 字段 ， 关 键 字 的 值 用 来 描述 元 
数据 字段 ， 从 而 形成 “关键 字 / 值 ”成 对 出 现 。 

如 果 要 描述 该 HTML 文档 的 作者 是 谁 ， 可 以 这 样 写 : C 


<head> 


<meta name=" Author" content="chenyicai" 
</head> 


通过 为 meta 元 素 定 义 属 性 name 来 说 明 元 数据 信息 的 关键 了 学“Author)， 属 性 content H 
来 定义 该 关键 字 的 值 〈chenyicai),“ 关 键 字 / 值 ” 对 就 是 “Author/chenyicai”， 从 而 描述 了 这 
篇 HTML 文档 的 作者 。 

name 属性 值 是 不 区 分 大 小 写 的 。 

http-equiv 属性 用 来 定义 一 些 实 用 的 元 数据 。HTMLS 规范 定义 了 表 1-21 中 5 个 实用 的 
元 数据 。 


表 1-21 5 个 实用 的 元 数据 


元 数 据 Jj 能 
contenr-language 设置 网 页 内 容 语言 
content-type 网 页 内 容 类 型 和 字符 集 
default-style 设置 默认 样式 表 
refresh 设置 定时 跳 转 
set-cookie 设置 网 页 Cookie 


除了 上 述 定义 ， 用 户 还 可 以 定义 扩展 的 元 数据 。 下 面 介绍 一 些 营 用 的 元 数据 。 
(1) 设置 网 页 内 容 关 型 的 学 符 集 
当 http-equiv 属性 的 值 为 content-type 时 可 以 设置 网 页 的 内 容 类 型 和 所 使 用 的 字符 集 ， 例 如 : 


«meta http-equiv-"content-type" content-"text/html; charset-gb2312 "> 


这 与 charest 属性 实现 的 功能 相似 ， 上 只 是 除了 声明 编码 字符 集 外 还 声明 了 文档 类 型 。 

(2) 设置 网 页 所 使 用 的 语言 

当 http-equiv 属性 的 值 为 content-language 时 可 以 设置 网 页 所 使 用 的 语言 ， 例 如 : 

«meta http-equiv-"content-language" content-"zh-CN "> 

HRR EFIE eio DULL IR D MEC V] ELS RE EAT] Y HH TECAEIRE A o zh-CN 是 指 简 体 
中 文 ， 台 湾 地 区 使 用 繁体 中 文 ， 用 zh-TW 表示 。 

(3) 设置 网 页 定时 跳 转 

当 http-equiv 属性 的 值 为 refresh 时 可 以 设置 网 页 定时 跳 转 或 者 刷 狐 目 喘 ， 例 如 : 


«meta http-equiv-"refresh" content="n; url=http://yourlink "> 
定时 让 网 页 在 指定 的 时 间 n 内 跳 转 到 页 面 “http://yourlink”。 例如 下 和 面 的 定义 : 


«meta http-equiv-"refresh" content="60; url=new.htm "> 
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浏览 絮 将 在 60 秒 后 日 动 转 到 new.htm。 用 户 可 以 利用 这 个 功能 制作 一 个 封面 ， 在 寿 干 时 
间 后 目 动 寓 读者 来 到 目录 页 。 如 果 要 使 浏览 器 在 完成 载 入 后 立即 刷新 页 面 ， 可 以 将 延迟 时 间 
定 为 0。 

如 果 对 urb 项 没有 定义 ， 那 么 浏览 右 会 刷新 本 页 。WWW 聊天 室 定 期 刷 独 的 功能 就 可 以 
使 用 这 种 方法 实现 。 

(4) 设置 网 页 Cookie 存活 时 间 

"^ http-equiv 属性 的 值 为 set-cookie 时 可 以 设置 Cookie 的 过 期 时 间 ， 如 果 过 期 ， 存 盘 的 
Cookie 将 被 删除 。 需 要 注意 的 是 必须 使 用 GMT 时 间 格 式 : 


«meta http-equiv-"set-cookie" content-"tue; 20 Aug 2014 11:20:20 GMT "> 


Cookie 是 浏览 网 页 时 服务 器 你 存在 本 地 计算 机 上 的 一 些 文字 ， 用 来 存储 某 些 信息 。 

(5) 设置 网 页 默认 样式 表 

当 http-equiv 属性 的 值 为 defauit-style 时 可 以 设置 网 页 献 认 的 CSS 样式 表 。 例 如 下 和 面 的 
代 人 码 设 置 默 认 样 式 表 为 styles/default.css 文件 : 


«meta http-equiv-"default-style" content-"styles/default.css "> 


2. <base> 和 <basefont> 标 签 

<base> 标 签 为 页 耐 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 。 

通 弟 情况 下 ， 浏 览 器 会 从 当前 文档 的 URL 中 提取 相应 的 元 素来 填写 相对 URL 中 的 空白 。 

使 用 <base> 标 签 可 以 改变 这 一 点 。 浏 览 器 随后 将 不 再 使 用 当前 文档 的 URL， 而 是 使 用 指定 
的 基本 URL 来 解析 所 有 的 相对 URL， 其 中 包括 <a>、<img>、<link>、<form> 标 签 中 的 URL. 

<basefon 人 > 标签 定义 基准 字体 。 访 标签 可 以 为 文档 中 的 所 有 文本 定义 默认 文学 磊 色 、 文 
字 大 小 和 字体 系列 。 注 意 ， 只 有 Internet Explorer 文 持 <basefon 世 标签 ， 大 家 应 该 避免 使 用 该 
标签 。 
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编程 标签 是 指 在 HIMLS 页 面 中 髓 入 第 三 方 的 其 他 编程 程序 ， 如 艇 入 JavaScript， 则 使 
用 <scrip 亿 标签 进行 艇 入 应 用 ，<embed> 为 外 部 程序 定义 容器 ， 这 里 重点 介绍 一 下 <scrip 亿 标 
签 ， 在 本 书 的 布局 动态 化 应 用 中 主要 使 用 该 标签 ， 编 程 标签 如 表 1-22 所 示 。 


表 1-22 编程 标签 


标 签 功能 描述 
<script> 定义 客户 站 脚本 

<noscript> 定义 针对 不 支持 客户 端 脚本 的 用 户 的 蔡 代 内 容 
<applet> AviliEte EH]. ENIAK applet 

«embed» 为 外 部 应 用 程序 〈 非 HTML) 定义 容器 

<object> 定义 散 入 的 对 和 象 


<param> 定义 对 象 的 参数 


HTML5 基 础 知识 


<scrip 信 标签 用 于 定义 客户 器 肢 本， 例如 JavaScript。script 76 z& BE Hn] UES ALAS WR], X 
可 以 通过 sre 属性 指 回 外 部 脚本 文件 。 必 需 的 type 属性 规定 脚本 的 MIME 类 型 。 
JavaScript 的 第 见 应 用 是 岁 像 操作 、 表 单 验证 以 及 动态 内 容 更 新 。 


在 HTML 文档 中 有 以 下 3 种 方式 使 用 JavaScript。 > 
1) 脚本 代码 可 以 使 用 script 元 素 定义 ， 其 间 的 脚本 代码 在 文档 加 载 后 顺序 执行 ， 并 且 执 


行 一 次 。 例 如 下 和 面 的 HTML 代码 万 段 : 


<script> 

/这 里 放置 JavaScript 代码 

Gunction popuMsg(msg)1 
Alert(msg); 

j 


</script> 
2) 可 以 定义 在 内 建 事 件 属性 值 中 ， 当 该 时 间 被 触发 时 就 会 执行 属性 值 中 的 脚本 代码 。 
例如 下 和 面 的 HTML 代码 片段 在 onlick 属性 值 中 定义 JavaScript fV: 


«button onclick="JavaScript:popuMsg(msg); ">click</button> 


3) 可 以 位 于 一 个 单独 的 文件 中 ， 当 位 于 一 个 单独 的 文件 中 时 ， 在 HTML 文档 中 可 以 使 
用 语句 将 它 动态 加 载 进 HTML 文档 中 ， 例 如 下 面 的 HTML 代码 请 段 加 载 fnc.js 文件 : 


«script src-"js/func.]s" »«/script^ 
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spa CSS 基本 语法 和 应 用 


网 页 布局 设计 可 使 用 表格 、 层 、 样 式 表 等 布局 方法 实现 网 页 的 设计 ， 其 中 DIV+CSS 在 
布局 方面 占有 很 大 的 优势 。 相 对 于 代码 条 理 混 乱 、 样 式 杂 乱 的 表格 布局 ，CSS 将 带 来 全 新 的 
布局 方法 ， 从 而 让 网 页 设计 师 更 轻松 、 更 自由 。 本 章 将 详细 介绍 CSS 的 基本 语法 和 应 用 ， 
并 对 CSS 的 “ 盒 模型 ”做 详细 的 前述 。 


n AMA A IJE jA 


本 章 学 习 重 点 : 


CSS 的 作用 、 类 型 与 冲突 
CSS 选择 器 的 应 用 


样式 的 继承 与 注释 

CSS 盒 模型 概念 

外 边 距 margin 的 控制 
边框 border 的 样式 设置 
内 边 距 padding 的 设置 
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DT S 层 肥 样式 表 


对 于 设计 者 来 说 CSS 层 车 样式 表 ) 是 一 种 非常 灵活 的 工具 ， 不 必 再 把 楷 杂 的 样式 定义 编写 
在 文档 中 ， 可 以 将 所 有 有 天文 档 的 样式 指定 内 容 全 部 脱离 出 来 ， 在 行 、 标 题 中 定义 ， 甚 全 作为 外 
部 样式 文件 供 HTML 调用 。 同 时 ， 在 定义 时 也 不 必 考 碟 各 种 浏览 右 的 兼容 性 。 


LCS 的 作用 、 类 型 与 冲突 


用 户 在 应 用 CSS 的 时 候 ， 首 先 要 了 解 CSS 的 作用 、 分 类 及 应 用 会 产生 的 冲突 。 

1. CSS 的 作用 

通过 灵活 多 变 的 定义 后 ，CSS 所 能 够 指定 的 样式 类 型 除了 通用 的 颜色 、 字 体 、 背 景 等 样式 
外 ， 还 可 以 控制 字符 间距 、 盾 充 距离 、 大 小 写 等 50 个 左右 的 样式 ， 显 示 出 强大 的 定义 能 力 。 

浏览 者 想 要 看 的 是 网 页 上 的 内 容 结构 ， 为 了 让 浏览 者 更 好 地 看 到 这 些 信息 ， 需 要 通过 格式 
控制 来 帮忙 。 以 前 ， 内 容 结 构 和 格式 控制 在 网 页 上 的 分 布 是 交错 结合 的 ， 人 查看 修改 很 不 方便 ， 而 
现在 把 两 者 分 开 可 以 大 大 方便 网 页 的 设计 者 。 内 容 结 构 和 格式 控制 相 分 离 ， 使 得 网 页 可 以 只 由 内 
容 构成 ， 而 将 所 有 网 页 的 格式 控制 指 癌 某 个 CSS 样式 表 文 件 。 其 好 处 表现 在 以 下 两 个 方面 : 

第 一 ， 人 简化 了 网 页 的 格式 代码 ， 外 部 的 样式 表 还 会 被 浏览 器 你 存在 绥 存 里 ， 加 快 了 下 载 
显示 的 速度 ， 也 减少 了 需要 上 传 的 代码 数量 〈 因 为 重复 设置 的 格式 将 只 被 保存 一 次 )。 

第 二 ， 只 要 修改 保存 看 网 站 格式 的 CSS 样式 表 文 件 ， 束 可 以 改变 整个 站 点 的 风格 特 
色 ， 在 修改 页 面 数量 庞大 的 站 点 时 显得 格外 有 用 。 这 避免 了 一 个 一 个 地 修改 网 页 ， 大 大 减少 
TERAJ TFE. 

DreamweaverCC2015 提供 了 对 CSS 样式 创作 的 完美 支持 ， 利 用 DreamweaverCC2015, 
用 户 不 需要 了 解 css 复杂 烦琐 的 语法 驶 可 以 创建 出 具有 专业 风格 的 CSS 样式 。 不 仅 如 此 ， 
DreamweaverCC2015 还 能 够 识别 现存 文档 中 定义 的 CSS 样式 ， 这 更 方便 用 户 对 现 有 文档 进 
行 修改 。 本 下 将 使 用 循序 渐进 的 方法 融 领 谈 者 领略 CSS 风采 ， 书 中 大 量 的 例子 是 制作 优秀 
网 页 的 最 佳 模 板 。CSS 也 是 一 种 标记 性 语言 ， 建 议 谈 考 在 阅读 本 章 时 一 定 要 注意 多 上 机 实践 
操作 ， 以 达到 民 好 的 学 习 效 果 。 

2. CSS 的 类 型 

灵 登 样式 表 的 类 型 有 3 种 ， 它 们 分 别 如 下 : 

(1) HTML 标记 样式 

HTML 标记 样式 实际 上 是 对 现 有 HTML 标记 的 一 种 重新 定义 。 当 创建 或 改变 这 类 样式 
时 ， 文 档 中 所 有 应 用 该 标记 的 文本 格式 都 会 自动 被 更 新 。 例 如 可 以 利用 Css 重新 定义 标 
题 。 标 记 <h2> 代 表 的 格式 ， 当 修改 其 格式 定义 时 ， 文 档 中 所 有 使 用 <h2> 标 记 的 文本 格式 都 会 
自动 变化 。 

(2) 自 定 义 CSS 样式 

HEX CSS 样式 和 某 些 字 处 理 程序 (如 Word) 中 使 用 的 样式 概念 类 似 ， 只 是 不 再 有 字 
从 样式 和 上 段落 样式 的 区 别 。 用 户 可 以 在 任何 文本 上 应 用 上 日 定义 的 CSS 样式， 无 论 该 文本 是 
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一 个 完整 的 文本 块 (例如 一 个 完整 的 段落 或 是 一 个 无 序列 表 )， 还 是 一 个 局 部 的 文本 范围 
(例如 在 段落 中 选中 的 文本 )。 如 果 在 一 个 文本 块 上 应 用 目 定 义 的 CSS 样式 ， 
DreamweaverCC2015 会 自动 在 文本 块 的 块 标 记 中 添加 class 属性 (例如 ， 当 为 一 个 段落 应 用 
名 为 mystyle 的 样式 时 可 能 产生 如 下 代码 : «p class="mystyle">)。 如 果 在 一 个 文本 范围 内 应 
用 Css 样式 ， 则 一 个 包含 了 class 属性 的 span 标记 会 被 插入 到 文档 中 ， 并 包围 选中 的 文本 。 

(3) CSS 选择 器 样式 

它 对 茶 些 特定 的 标记 组 合 进 行 重新 定义 ， 也 可 以 对 所 有 包含 了 特定 id 属性 的 标记 进行 
重新 定义 。 例 如 ， 通 过 定义 h2 和 em 样式 可 以 使 文档 中 所 有 出 现在 h2 标记 中 的 市 有 人 被 <em> 
和 </em> 标 记 包 容 的 文学 目 动 应 用 该 样式 。 用 户 也 可 以 定义 一 个 #mystyle 样式 ， 它 可 以 应 用 
到 所 有 带 有 ID="mystyle" 属 性 的 文本 上 。 对 文本 的 常规 格式 化 操作 ， 会 窗 产 CSS 样式 。 
此 ， 如 果 用 户 希 户 用 CSS 样式 控制 段落 的 格式 ， 必 须 删 除 所 有 常规 设置 的 HTML 格式 或 
HTML 样式 。 

3. CSS 的 冲突 

在 同一 文本 中 应 用 两 种 或 两 种 以 上 的 样式 ， 这 些 样式 会 相互 冲突 ， 从 而 产生 不 可 预料 的 
效 素 。 浏 览 夯 根据 以 下 规则 显示 样式 属性 : 

1) 如 果 在 同一 文本 中 应 用 两 种 样式 ， 浏 览 器 会 显示 出 两 种 样式 中 除了 冲突 的 属性 之 外 
的 所 有 属性 。 

2) 如 果 在 同一 文本 中 应 用 的 两 种 样式 是 相互 冲突 的 ， 浏 览 右 显示 出 最 里 面 的 样式 属性 。 

3) 如 果 存 在 直接 冲突 ， 目 定义 样式 的 属性 (应 用 class 属性 的 样式 ) EIE ii HTML 标 
记 样 式 的 属性 。 
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AEX CSS 样式 是 最 常用 的 一 种 创建 方式 ， 它 将 一 系列 格式 组 合 起 来 ， 并 以 适当 的 形 
式 命名 。 创 建 自 定义 CSS 样式 的 操作 步骤 如 下 : 

1) 在 Dreamweaver CC2015 软件 中 选择 末 单 栏 中 的 “窗口 ”-“CSS 设计 器 ”命令 ， 打 
JF “CSS 设计 带 ” 和 面板 ， 如 图 2-1 所 示 。 


ARS: . body.div didt dd uo h 1,h2,h3,h4,h5,h6 pre,cod- 
"ya CSS AN 


+ Ett 
im e) METE 
ur +- 源 
/ / -OBESI css xr 
附加 现 有 的 css 文件 


在 多 面 中 定义 
当前 模式 : 列 出 当前 所 选 内 容 的 规 风 
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图 2-1 “CSS 设计 器 ”面板 


CSS 基 本 语法 和 应 用 


2) 在 “CSS 设计 器 ”面板 中 用 鼠标 单 击 面板 左上 角 的 “添加 css 源 ” 图 标 回 |， 在 弹出 
的 荣 单 中 选择 “创建 新 的 CSS 文件 ”命令 ， 打 开 “ 创 建新 的 CSS 文件 ”对 话 框 ， 如 图 
2-2 HIZR. 


文件 JURL(F): 
添加 为 : © pH 
O SA (D 
|» 有 条 件 使 用 《可 选 ) 


2-2 “创建 新 的 CSS 文件 ”对 话 框 


3) 在 “文件 /URL(F)” 文 本 框 中 输入 新 建 的 CSS 文件 名 ， 单 击 “ 确 定 ” 按 钮 即 可 创建 
一 个 样式 表 文 件 。 如 果 已 经 建 好 其 他 的 样式 表 ， 可 以 单 击 “浏览 ”按钮 直接 链接 文件 。 它 用 
来 建立 一 种 自己 定制 的 样式 表 ， 由 用 户 目 己 规定 样式 表 元 素 名 称 ， 外 部 样式 表 文 件 必 须 以 
“.css” 为 扩展 名 ， 并 且 可 以 在 整个 HIML 中 被 调用 。 

在 成 功 创建 链接 文件 之 后 ， 切 换 到 源 代码， 加 入 如 下 一 行 调用 样式 表 的 命令 : 


<link href-"css/login.css" type="text/css" rel="stylesheet"/> 


4) 在 定义 好 样式 名 称 后 单 击 “确定 ”按钮 进行 确认 ,“ 选 择 器 ” 即 会 被 激活 ， 通 过 上 自 定 
义 样式 名 称 对 象 ， 在 “属性 ”面板 中 进行 相应 的 属性 设置 即 可 实现 样式 的 编辑 与 应 用 ， 如 图 
2-3 所 示 。 


ba bd 
所 有 模式 : 列 出 整个 文档 的 规则 


2-3 CSS 样式 表 的 属性 设置 


^ HTML5-tCSS-tJavaScript 网 页 布局 从 入 门 到 精通 


CSS 样式 表 的 属性 设置 与 应 用 将 在 后 面 的 实例 中 学 习 、 应 用 。 


^E 在 HTML 文档 中 应 用 OS 的 方法 


尽管 CSS 功能 强大 、 涵 盖 面 极 广 ， 但 仍然 有 较 强 的 规律 可 循 ， 比 较 简 单 、 易 和 学。 用户 
一 旦 掌握 了 其 精 舌 ， 就 可 以 轻松 地 将 其 为 已 所用， 即便 是 与 HIML 结合 使 用 也 不 例外 。 不 
过 ， 当 将 CSS 实际 运用 于 HTML 文档 中 时 ，CSS 的 使 用 方法 也 有 所 不 同 。 总 结 起 来 ， 在 
HTML 中 常用 3 种 方式 定义 CSS， 即 Embedding GRAIÈ), Linking (外 部 引用 式 ， 或 者 称 
为 引用 式 ) 和 Inline (WEI). 

1. BHRAGX 

使 用 HTML 中 的 style 元 素 可 以 在 HTML. 网 页 内 定义 CSS FEX, XERRA CSS 的 
定义 。style 元 素 的 定义 位 于 HTML 文档 头 部 ， 它 位 于 head 元 素 内 。 

CSS 样式 定义 的 内 容 位 于 style 元 素 之 间 ， 例 如 下 面 的 代码 : 


<head> 
<style> 
FAX CSS 样式 定义 .… 
</style> 
</head> 


在 HTMLA 中 通过 HTML 注释 标签 〈<!-- 和 -->) 隐藏 style 元 素 的 内 容 ， 虽 然 被 隐藏 ， 
浏览 器 也 可 以 读 取 隐藏 的 内 容 并 应 用 于 呈现 元 素 的 style 属性 ， 但 是 允许 不 文 持 此 类 型 的 浏 
哆 占 忽 略 样式 表 。 

例如 下 面 的 代码 使 用 注释 隐藏 了 style 元 素 的 内 容 ， 但 是 其 定义 仍然 可 以 被 浏览 器 使 用 : 


«style type="text/css"> 

«t-- P HE A X CSS 样式 定义 
hl (color: blue} 
P {color: red} 

ue 

</style> 


这 样 做 主要 是 为 了 使 那些 旧 的 、 不 文 持 样式 表 的 浏览 器 不 呈现 style 元 素 的 内 容 。 

但 是 对 于 HIMLS， 注 释 不 再 被 允许 ， 因 为 符合 HIMLS 标准 的 浏览 占 都 可 以 识别 style 
元 素 并 正确 地 执行 。 现 在 旧式 的 浏览 器 已 经 很 少 了 ， 所 以 我 们 不 再 推荐 使 用 注释 。 

用 户 可 以 在 一 个 HIML 文档 头 部 定义 多 个 style 元 系 ， 实 现 多 个 样式 表 。 除 了 全 局 属性 
以 外 ，style 元 素 还 包括 以 下 几 个 重要 的 属性 。 

1) style 属性 用 来 定义 样式 表 的 语言 ， 该 属性 可 以 指定 样式 表 语 言 的 类 型 ， 必 须 是 正确 
的 MIME 类 型 ， 如 type="text/css" 7 fi H] CSS. 

在 HIML4 中 ， 必 须 定 义 该 属性 ， 并 为 该 属性 指定 一 个 值 ， 因 为 该 属性 没有 默认 值 。 在 
HTMLS 中 ， 该 属性 可 以 被 忽略 ， 因 为 该 属性 有 默认 值 "text/css"。 

2) media 属性 用 来 指定 样式 表 所 要 应 用 的 介质 。 属 性 值 可 以 是 单个 介质 描述 符 ， 也 可 以 
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是 用 逗号 隅 开 的 多 个 介质 揪 述 从 ， 这 样 束 可 以 应 用 于 多 种 介质 。 

如 果 和 忽略 访 属性， 那么 默认 值 束 是 “all”， 表 示 适 用 于 多 种 介质 。 

3) scoped 属性 是 一 个 风 辑 值 ， 表 示 样 式 应 用 的 郊 围 。 如 果 一 个 style 元 素 定 义 该 属性 ， 
那么 当前 style 元 素 定义 的 样式 仅 应 用 到 它 的 直接 父 元 素 的 内 容 〈 子 节点 )。 如 果 不 指 定 C) 
scoped 属性 ， 访 style 元 素 定 义 的 样式 可 以 应 用 到 整个 文档 。 

4) 全 局 属性 中 的 title 属性 对 于 style TRARRE, WREX title 属性 ， 则 可 以 声 
明 一 个 “可 伏 换 样式 表 ”， 用 户 使 用 浏览 器 就 可 以 从 多 个 “可 蕉 换 样式 表 ” 中 选 一 个 ， 将 仪 
应 用 选择 的 “可 替换 样式 表 ”， 而 不 应 用 其 他 样式 表 。 

特定 的 样式 表 语 言 有 不 同 的 实现 规则 ， 对 于 CSS， 可 以 在 style 元 素 中 实现 多 种 样式 的 
定义 ， 这 会 使 用 到 选择 人 符 ， 用 户 可 以 定义 多 种 类 型 的 选择 从。 

这 些 选择 符 总 体 上 可 以 分 为 以 下 儿 类 : 

1) 为 某 个 特定 的 元 素 名 定义 样式 ， 这 样 网 页 中 所 有 的 该 元 素 都 可 以 应 用 访 样 式 。 

2) 为 某 个 特定 的 class 属性 名 定义 样式 ， 网 页 中 所 有 的 class 属性 值 为 该 属性 名 的 元 于 
都 可 以 应 用 该 样式 。 

3) 为 某 个 特定 的 元 素 定义 样式 ， 该 元 素 使 用 id 属性 来 标识 ， 样 式 也 同样 使 用 id 属性 值 

4) 为 某 些 特 定 用 途 定 义 的 使 用 以 上 3 类 无 法 实现 的 选择 符 ， 包 括 伪 类 和 伪 元 系 选 择 
从 等 。 

如 下 面 的 代码 分 别 应 用 了 这 几 种 定义 ， 并 且 由 于 为 hl 元 素 定 义 了 多 种 样式 源 ， 所 以 样 
式 可 以 登 加 。 


<head> 
<style> 
hl {border-width: 1; border: solid;} 
hl.iclass { border-width: 1;border: solid; 
hl#newid {border-width: 1;border: solid; } 
hl: :first-letter (border-width: 1;border: solid; } 
</style> 
</head> 
<body> 
<hl> 应 用 元 素 名 定义 </hl> 
«hl class="iclass"> 应 用 类 定义 和 元 素 名 定义 </h1> 
«hl id="newid"> 应 用 id 定义 和 元 素 名 定义 </h1> 
</body> 


2. 外 部 引用 式 

当 样 式 需 要 被 应 用 到 很 多 页 面 的 时 候 ， 外 部 样式 表 将 是 理想 的 选择 。 使 用 外 部 样式 表 可 
以 通过 更 改 一 个 文件 来 改变 整个 站 点 的 外 观 。 外 部 引用 就 是 指 HTML 文档 本 身 不 含有 CSS 
样式 定义 ， 而 是 通过 动态 引用 外 部 CSS 文件 来 定义 HTML 文档 的 表现 形式 。 通 过 将 样式 表 
使 用 单独 的 文件 来 定义 ， 就 可 以 将 样式 表 与 HTML 文档 分 离 。 将 样式 表 与 HTML 文档 分 离 
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D) 在 多 个 文档 间 共 享 样式 表 ， 对 于 较 大 规模 的 网 站 ， 将 CSS 样式 定义 成 一 个 一 个 独立 
的 文档 ， 也 可 以 有 效 地 提高 效率 ， 并 有 利于 对 网 站 风格 的 维护 。 

2) 改变 样式 表 ， 而 无 须 更 改 HTML 文档 ， 这 和 HTML 语言 内 容 与 形式 分 开 的 原则 相 
一 致 。 

3) 根据 介质 有 选择 地 加 载 样式 表 。 

有 很 多 种 方法 可 以 实现 CSS 文件 的 外 部 引用 。 

(1) 使 用 处 理 指令 

在 HTML 文档 的 开头 部 分 写 一 个 关于 样式 表 的 处 理 指令 语句 ， 例 如 : 


<?xml-stylesheet type="text/css" href=" style.css"?> 
<html> 


</html> 


按照 这 条 处 理 指 令 语句 的 指令 ， 该 文档 在 浏览 右上 的 表现 方式 由 CSS 样式 文件 style.css 
决定 。 因 此 ，CSS 样式 文件 style.css 将 会 被 导入 当前 HTML WF, WAERN “ARAI” P 
式 ， 就 像 在 该 文档 中 定义 的 一 样 。 

大 多 数 浏 览 器 仅 当 该 文档 被 保存 为 .xhtml 或 .xml 扩展 名 时 (也 就 是 使 用 XHTML 或 者 以 
XML 语法 编写 HTML 时 ) 才 会 有 效 ， 所 以 不 推荐 这 样 做 。 

(2) 使 用 @import 指令 

用 户 也 可 以 在 style 元 素 之 间 使 用 @import 指令 导入 外 部 的 CSS 样式 表 文 件 ， 例 如 下 面 
的 代码 : 


<style> 

刻下 和 面 两 行 导入 外 部 样式 表 代 人 码 的 效果 是 相同 的 */ 
(@import "style.css"; 

(Vimport url{"style.css"}; 

</style> 


任何 @import 规则 必须 出 现在 样式 表 中 的 所 有 规则 之 前 。@import 指令 的 参数 是 一 个 
CSS 样式 表 文 件 的 URL 地址， 表示 URL 地 址 的 字符 串 也 可 以 包含 在 urlO 国 数 内 。 上 面 两 个 
@import 规则 实现 的 效果 是 相同 的 。 

在 一 个 单独 的 CSS 样式 表 文 件 中 ， 也 可 以 使 用 @import 指令 将 男 一 个 CSS 样式 文件 导 
入 到 当前 文件 中 。 

(1) 使 用 link 元 素 

在 HTML 代码 中 使 用 link 元 素 也 可 以 引用 外 部 样式 表 ， 使 用 href 属性 指定 样式 表 文 件 
所 在 的 URL， 并 有 日 指 定 rel="styesheet"、type="text/css"， 前 者 表示 引用 的 是 样式 表 ， 后 者 表 
示 引 用 的 是 CSS 样式 表 。 例 如 : 


<link href="style.css"> rel="stylesheet" type="text/css"> 


(2) 使 用 HTTP 消息 报头 链接 到 样式 表 
用 户 可 以 使 用 HTTP 消息 报头 的 link 字段 链接 一 个 外 部 样式 表 ，link 字段 的 功能 和 
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HTML 中 link GRAJ AEH E, AAHAS EA. Aa PI Bs 
link:< style.css>; rel=stylesheet 


等 同 于 : 
«link href="style.css"> rel="stylesheet" type="text/css"> 


当 把 HTML 文档 作为 电子 邮件 正文 发 送 时 ， 这 个 也 可 以 发 生 作 用 ， 但 是 一 些 电 子 邮 件 
管理 程序 可 能 会 改变 报头 字段 的 顺序 ， 为 了 保证 样式 表 的 顺序 不 被 更 改 ， 应 该 将 报头 字段 串 
联 起 来 ， 将 相同 报头 字段 融合 到 一 个 字段 。 

属性 值 无 须 使 用 引号 ， 除 非 属性 值 包含 空格 。 对 于 HTTP. 或 者 电子 邮件 消息 报头 中 不 被 
允许 的 字符 ， 可 以 使 用 字符 实体 交换 。 在 HTTP 报头 中 可 以 使 用 多 个 link 字段 ， 从 而 可 以 使 
用 link 字段 链接 多 个 外 部 样式 表 ， 并 且 HTTP 报头 中 的 link 字段 比 HTML 文档 中 的 link 元 
素 具 有 的 优先 级 局。 

3. 内 联 式 

当 特 殊 的 样式 需要 应 用 到 个 别 元 素 时 ， 可 以 使 用 内 联 样式 。 使 用 内 联 样式 的 方法 是 在 相 
关 的 标签 中 使 用 样式 属性 ， 样 式 属性 可 以 包含 任何 CSS 属性 。 每 一 个 HTML 元 素 都 包含 一 
个 style 属性 ， 使 用 该 属性 可 以 直接 指定 样式 ， 访 样式 仪 能 作用 于 该 元 素 的 内 容 ， 对 于 另 一 
个 同名 的 元 素 则 不 起 作用 。 

例如 下 面 的 HTML 代码 片段 : 


«p style="color:#000;font-weight:bold; "> 请 单 击 <a her 合 "index.html"> 首 页 的 链接 </a></p> 


这 种 方式 虽然 比较 直接 ， 但 不 适合 模块 化 管理 ， 并 且 仅 能 用 于 一 个 元 素 ， 如 果 出 现 另 一 
个 同名 元 素 ， 则 必须 重新 定义 。 
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层 登 样式 表 是 一 个 完全 的 纯 文 本 文件 ， 通 香 以 “.css” 为 扩展 名 作为 单独 的 文件 来 使 
用 ， 它 的 内 容 包 含 了 一 组 告诉 浏览 器 如 何 安 排 与 显示 特定 的 html 标签 中 内 容 的 规则 ，CSS 
定义 规则 由 3 个 部 分 构成 ， 即 选择 符 (selector)、 属 性 (properties) 和 属性 的 取 值 (value )。 
其 语法 如 下 : 

selector { property: value } 

说 明 : 选择 从 { 属性 : 信 } 

l. 选择 符 

选择 符 是 要 定义 样式 的 html 标签 ， 将 html 标签 作为 选择 符 定 义 后 ， 在 HTML 页 面 中 该 
标签 下 的 内 容 会 按照 CSS 定义 的 规则 发 生 改 变 。 

2. 属性 

CSS 属性 指 的 是 在 选择 符 中 要 改变 的 内 容 ， 币 见 的 有 字体 属性 、 颜 色 属 性 、 文 本 属性 
等 。 下 和 面 残 是 定义 的 一 个 样式 表 。 


"s HTML5*CSS-* JavaScript CELITNBELTI. 


(Q)charset"gb2312"; 
body { 

font-family: "宋体 "; 
font-size: 25px; 
color: #FF0000; 


j 

pi 

font-family: "宋体 "; 
font-size: 20px; 
color: #000; 

j 


在 这 个 样式 表 中 : 

1) @charset"gb2312" 表 示 使 用 中 文 国 标 字符 集 。 

2) body 和 p 是 HIML 中 的 两 个 标签 ， 对 这 两 个 标签 设置 了 下 和 面 3 种 样式 。 
€ font-family: 指定 字体 的 字 型 。 

€ font-size: 指定 字体 的 大 小 。 

€ color: 指定 字体 的 颜色 。 


ZELUS 的 3 种 选择 器 


用 户 通过 选择 器 对 不 同 的 HTML 标签 赋予 各 种 样式 声明 ， 即 可 实现 各 种 效果 。 主 要 包 
括 标 记 选 择 占 、 类 别 选择 右 以 及 ID 选择 右 。 

1. 标记 选择 器 

HTML 页 面 由 很 多 不 同 的 标记 组 成 ，CSS 标记 选择 器 用 于 声明 哪些 标记 采用 哪 种 CSS 
样式 。 例 如 p 选择 器 用 于 声明 页 面 中 所 有 <p> 标 记 的 样式 风格 。 同 样 可 以 使 用 hl 选择 器 来 声 
明 页 面 中 所 有 的 <h1> 标 记 的 CSS 风格 ， 例 如 : 


<style> 
h1 { color : blue; font-size : 24px; } 
</style> 


以 上 CSS 代码 声明 了 HTML RAFAH, OCT BJ ES IE 
为 24px。 每 一 个 CSS 选择 需 都 包 侣 选择 器 本 身 、 属 性 和 值 ， 其 中 属性 和 值 可 以 设置 多 个 ， 
从 而 实现 对 同一 个 标记 声明 多 种 样式 风格 ， 如 图 2-4 所 示 。 


声明 声明 
选择 器 属性 值 属性 值 


2-4 CSS 标记 选择 器 模型 
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如 果 希 望 所 有 的 <h1> 标 记 不 再 采用 蓝 色 ， 而 是 采用 红色 ， 只 需要 将 属性 color 的 值 修改 
为 red 即 可 全 部 生效 。 

2， 类 别 选择 器 

标记 选择 器 一 旦 声明 ， 那 么 页 面 中 所 有 的 该 标记 都 会 相应 地 产生 变化 。 例 如 声明 了 <p> O) 
标记 为 红色 时 ， 同 页 面 中 所 有 的 <p> 标 记 都 将 显示 为 红色 。 如 果 希 望 其 中 的 某 一 个 <p> 标 记 不 
是 红色 ， 而 是 蓝 色 ， 这 时 仅 依靠 标记 选择 器 是 远 远 不 够 的 ， 可 以 使 用 类 别 选择 器 ， 如 图 2-5 
HR. 


声明 声明 
2 oc TE S 属性 值 属性 值 


图 2-5 闫 别 选择 规模 型 


当 页 面 中 同时 出 现 3 个 <p> 标 记 ， 并 且 和 希望 它们 的 颜色 各 不 相同 时 ， 可 以 通过 设置 不 同 
的 class 选择 器 来 实现 。 
例如 : 


<html> 

<head> 

<meta charset="utf-8"> 

<title> 类 别 选 择 器 </title> 

«style tpye="text/css"> 
.One{color:red;font-size:20px} 


.two{color:green;font-size:24px; } 
three (color:cyan;font-size:26px;] 
</style> 
</head> 
<body> 
<p class=" one" > R] fs 1</p> 
«p class="two"> 关 别 选 择 器 2</p> 
«p class="three"> 关 别 选 择 器 3</p> 
<h3 class="two"> 标 记 h3 同样 适用 </h3> 
</body> 
</html> 


其 显示 效果 如 图 2-6 所 示 。 

可 以 看 到 3 个 <p> 标 记分 别 呈 现 出 不 同 的 颜色 以 及 学 的 大 小 ， 而 且 任何 一 个 class wE 
适用 于 所 有 HTML 标记 ， 只 需要 用 HTML 标记 的 class 属性 声明 即 可 。 最 后 一 行 <h3> 标 记 显 
示 效 果 为 粗 体 字 ， 而 使 用 了 .two 选择 喜 的 第 2 个 <p> 标 记 却 没有 变 成 粗 体 。 这 是 因为 在 .two 
类 别 中 没有 定义 字 的 粗细 属性 ， 因 此 各 个 HTML 标记 采用 了 其 目 身 默认 的 显示 方式 。 


"s HTML5-tCSS-tJavaScript BESERASSHE 
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类 别 选 择 器 1 
类 别 选 择 器 2 


类 别 选 择 器 3 


标记 h3 同 样 适用 
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当 页 面 中 几乎 所 有 的 <p> 标 记 都 使 用 了 相同 的 样式 风格 ， 只 有 一 两 个 特殊 的 <p> 标 记 需 
要 使 用 不 同 的 风格 来 突出 时 ， 可 以 通过 类 选择 器 与 标记 选择 器 配合 使 用 。 


例如 : 
«style type="text/css"> 
pícolor:blue;font-size:20px;] 上 # 标记 选择 器 */ 
.myclass{color:red;font-size:24px;} — /* 类 别 选择 器 */ 
</style> 
<body> 


<p>class 选择 占 与 标记 选择 占 1</p> 
«p class="myclass">class 选择 需 与 标记 选择 器 2</p> 
<p>class 选择 器 与 标记 选择 右 3</p> 
«Jbody- 
实例 代码 首先 通过 标记 选择 占 定 义 <p> 标 记 的 全 局 显示 方案 ， 然 后 通过 一 个 class 选择 器 
对 需要 突出 的 <p> 标 记 进行 单独 设置 ， 这 样 大 大 提高 了 代码 的 编写 效率 。 
男 外 ， 类 别 选择 器 还 有 一 种 很 下 观 的 使 用 方法 ， 束 是 直接 在 标记 声明 后 接 类 别名 称 ， 以 
此 来 区 别 该 标记 ， 如 图 2-7 所 示 。 


声明 声明 


DR] font-size:24px; n 
HERE [| 
属性 值 


标记 Kai lE 值 


2-7 ”标记 类 别 选 择 器 模型 
在 HTML 标记 中 还 可 以 同时 给 一 个 标记 运用 多 个 class 类 别 选 择 器 ， 从 而 将 两 个 类 别 的 
样式 风格 同时 运用 到 一 个 标记 中 。 这 在 实际 制作 网 站 时 往往 很 有 用 。 
例如 : 


«style type="text/css"> 
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.one {color:blue;} /* 颜色 */ 

two ffont-size:20px;) I 字 的 大 小 */ 
</style> 
<body> 


<h4> 不 使 用 类 别 选 择 器 </h4> 
<h4 class="one"> 只 使 用 第 1 种 </h4> 
<h4 class="two"> 只 使 用 第 2 种 </h4> 


<h4 class-"one two' 人 > 同时 使 用 两 种 类 别 选 择 器 </h4> 
</body> 


显示 效果 如 图 2-8 所 示 ， 可 以 看 到 使 用 第 1 种 class 的 第 2 行 显示 为 葛 色 ， 而 第 3 行 仍 
为 黑色 ， 但 由 于 使 用 了 .two， 字 体 变 大 了 。 第 4 行 通过 class="one two" 将 两 个 样式 同时 加 
入 ， 得 到 监 色 大 字体 。 第 1 行 和 第 5 行 没有 使 用 任何 样式 ， 仅 作为 对 比 时 的 参考 。 


| [ 两 种 类 别 选择 器 ua Y O O O 


- > Q fi D file:///D:/book/DIV +CSS/chap02/css fhAs 3.7 = 


不 使 用 类 别 选 择 器 
只 使 用 第 1 种 


只 使 用 第 2 种 
同时 使 用 两 种 类 别 选 择 器 


图 2-8 ”两 种 样式 表 应 用 效果 

3. ID 选择 器 

ID 选择 器 的 使 用 方法 和 class 选择 器 基本 相同 ， 不 同 之 处 在 于 ID 选择 器 只 能 在 HTML 
页 面 中 使 用 一 次 ， 因 此 其 针对 性 更 强 。 在 HTML 的 标记 中 只 需要 利用 id 属性 就 可 以 直接 调 
用 Css 中 的 ID 选择 器 ， 其 格式 如 图 2-9 所 示 。 


声明 声明 
| | | | 
IDEE ar 属性 值 属性 值 


2-9 ID 选择 器 模型 
例如 : 


<style type="text/css"> 
#one{font-weight:bold;} 
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#two{font-size:25px;color:red;} 
</style> 

<body> 

<p id="one">ID F$ 4r </p> 

<p id="two">ID 选择 器 二 </p> 

«p id="one two">ID 选择 器 三 </p> 
</body> 


显示 效果 如 图 2-10 所 示 。 


"— CQ fi (|file///D;/book/DIV«CSS/chap02/IDsjzs&.htm z». I 


了 ID 选择 器 一 
IDEER 


ID 选择 器 三 


2-10 ID 选择 器 应 用 效果 


最 后 一 行 没 有 任何 CSS 样式 风格 显示 ， 这 意味 看 ID 选择 需 不 文 持 像 class 选择 器 那样 
的 多 风格 同时 使 用 。 类 似 “one two” 是 完全 错误 的 语法 。 还 需要 指出 的 是 ， 将 ID 选择 需 用 
于 多 个 标记 是 错误 的 ， 因 为 每 个 标记 定义 的 ID 不 只 是 CSS 可 以 调用 ，JavaScript 等 其 他 脚本 
语言 同样 可 以 调用 。 如 果 一 个 HTML 中 有 两 个 相同 的 ID 的 标记 ， 则 会 导致 JavaScript 在 得 
Jk ID 时 出 错 。 正 因为 JavaScript 等 脚本 语言 也 能 调用 在 HTML 中 设置 的 ID, MA ID 选择 
器 一 直 被 广泛 使 用 。 在 编写 CSS 代码 时 ， 用 户 应 该 养 成 民 好 的 编写 习惯 ,一 个 ID 最 多 只 能 
赋予 一 个 HTML 标记。 


LT A YAT Sis HJ P3 HH 


在 利用 CSS 选择 器 控制 HTML 标记 时 ， 除 了 每 个 选择 器 的 属性 可 以 一 次 声明 多 个 以 
外 ， 选 择 器 本身 也 可 以 同时 声明 多 个 ， 并 且 任 何 形式 的 选择 右 (包括 标 记 选 择 器 、class 2551] 
选择 器 、ID 选择 部 等 ) 都 是 合法 的 。 本 节 主 要 介绍 选择 器 集体 声明 的 各 种 方法 以 及 选择 器 
RIBERA e 

1. 集体 声明 

在 声明 各 种 CSS 选择 费时 ， 如 果 某 些 选择 器 的 风格 是 完全 相同 的 或 者 部 分 相同 ， 这 时 
可 以 利用 集体 声明 的 方法 将 风格 相同 的 CSS. 选择 器 同时 声明 。 

例如 : 


«style type="text/css"> 
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h1,h2,pícolor:purple;font-size:20px;! /* 集体 声明 */ 
.newclass,£one ftext-decoration:underline;] /* 集体 声明 */ 
</style> 
<body> 

<h1> 和 集体 声明 hl1</h1> 

<h2 class-"newclass "> 集体 声明 h2</h2> 

<p> 集 体 声 明 p1</p> 

«p class-"newclass "> 集体 声明 p2</p> 

«p id="one"> 集 体 声明 p3</p> 
</body> 


其 显示 效果 如 图 2-11 所 示 。 


ET x VI 

- 5 Q fi [D file///D:/book/DIV+CSS/chap02/ $E Ahtm zy BI 三 
集体 声明 hl 

集体 声明 h2 


集体 声明 p1 


2-11 集体 声明 应 用 效果 


实例 中 所 有 行 的 颜色 都 是 紫色 ， 而 且 文 字 大 小 均 为 20px。 集 体 声明 的 效果 与 单独 声明 
的 效果 完全 相同 ，.newclass 和 #one 的 声明 并 不 影响 前 一 个 集体 声明 ， 第 2 行 和 最 后 两 行 在 
紫色 和 大 小 为 20px 的 前 提 下 使 用 了 下 划 线 。 

对 于 实际 网 站 中 的 一 些小 型 页 面 ， 例 如 弹出 的 小 对 话 框 和 上 传 附件 的 小 窗口 等 ， 如 果 希 
望 这 些 页面 中 所 有 的 标记 都 使 用 同一 种 CSS 样式 ， 但 又 不 希望 逐个 加 入 集体 声明 列表 ， 这 
时 可 以 利用 全 局 声明 符号 “*?”。 

例如 : 


«style type="text/css"> 
«t 
* (color: purple;font-size:15px;] /* 全 局 声明 */ 
.myclass, #one ftext-decoration:underline;! /* 集体 声明 */ 
2m 
</style> 
<body> 
<h1> 全 局 声明 h1</h1> 
<h2 class="myclass"> 全 局 声明 h2</h2> 
<p> 全 局 声明 pl«/p» 
«p class="myclass"> 全 局 声明 p2</p> 
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«p id="one"> 全 局 声明 p3«/p» 
</body> 


HARUR 2-12 所 示 。 这 种 全 局 声明 的 方法 在 一 些小 页 面 中 特别 实用 。 


/ D 全 局 声明 | E - 
€ > Q fi [file///D/book/DIV«CSS/chap02/2/SzBi.htmzy A = 
全 局 声明 hl 


| 全 局 声明 pl 
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2-12. 全 局 声明 应 用 效果 


2. ARARE 

在 CSS 选择 器 中 还 可 以 通过 租 套 的 方式 对 特殊 位 置 的 HTML 标记 进行 声明 ， 例 如 当 <p> 
与 </p> 之 间 包 含 <b></b> 标 记 时 ， 吏 可 以 使 用 和 藤 套 选择 器 进行 相应 的 控制 。 

例如 : 


.Special i ( color : red} /* 使 用 了 属性 special 标记 里 面包 含 的 <i>*/ 
Zone li ( padding-left : 12px} /*ID 为 one 的 标记 里 面包 含 的 <li>*/ 


td.top .topl strongífont-size: 16px} — /*EJEE. REESCHIS/ 


KERERE ES] 32. PRERE, KIFAA ID 选择 此 部 可 以 
HITRE. 


SENEE EEEN 


CSS 继承 指 的 是 子 标记 会 继承 父 标记 的 所 有 样式 风格 ， 并 可 以 在 父 标记 样式 风格 的 基础 
上 加 以 修改 ， 产 生 新 的 样式 ， 而 子 标 记 的 样式 风格 完全 不 会 影响 父 标记 。 层 车 性 束 是 继承 
性 ， 样 式 表 的 继承 规则 是 外 部 的 元 素 样 式 会 你 留 下 来 继承 给 这 个 元 素 所 包含 的 其 他 元 系 。 事 
实 上 ， 上 所 有 在 元 又 中 肯 套 的 元 素 都 会 继承 外 层 元 系 指 定 的 属性 值 ， 有 时 会 把 很 多 层 悉 套 的 样 
式 登 加 在 一 起 ， 除 非 用 户 妃 外 更 改 。 

所 有 的 CSS 语句 都 是 基于 各 个 标记 之 间 的 父子 关系 的 ， 处 于 最 上 端的 <html> 标 记 称 为 
"JR 〈root)”， 它 是 所 有 标记 的 源头 ， 往 下 层 层 包含 。 在 每 一 个 分 文中 ， 称 上 层 标 记 为 其 下 层 
标记 的 “ 父 ” 标 记 ， 相 应 地 ， 下 层 标记 称 为 上 层 标记 的 “ 子 ” 标 记 。 例 如 ， 在 下 面 程序 中 ， 
<h1> 标 记 是 <body> 标 记 的 子 标 记 ， 同 时 它 也 是 <em> 的 父 标记 。 这 种 层 层 舱 套 的 关系 也 正 是 
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CSS 名 称 的 含义 。 
例如 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> ICE TE as title 
</head> 
<style> 
hl {color:red;text-decoration:underline;} 
hl emícolor:green;font-size:40px;! /* 般 套 选择 器 */ 
</style> 
<body> 
<hl>DIV+CSS<em> 布 局 </em> 很 简单 </hl> 
<p> 学 习 到 的 技术 <em> 包 括 </em>:html$、<strong>div、<em>css</em>、javascript</strong> 等 等 
</p> 
</body> 
</html> 


效果 如 图 2-13 所 示 。 


TAPAR EXA-htmlb. div. css javascript? 


图 2-13 样式 继承 效果 


在 使 用 不 同 的 选择 符 定 义 相同 的 元 素 时 ， 要 孝 虑 不 同 选择 符 之 间 的 优先 级 。 对 于 ID 选 
择 符 、 类 选择 符 和 HTML 标记 选择 符 ， 由 于 ID 选择 符 是 最 后 加 到 元 素 上 的 ， 所 以 优先 级 最 
局 ， 其 次 是 类 选择 从 。 如 果 想 超越 这 三 者 之 间 的 关系 ， 可 以 用 !important 提升 样式 表 的 优先 级 。 

例如 : 

p { color: #FF0000!important } 


.blue { color: #0000FF} 
?idl { color: ZFFFF00j 
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以 上 代码 同时 对 页 面 中 的 一 个 段落 加 上 3 种 样式 ， 它 最 后 会 依照 被 !important 声明 的 
HTML 标记 选择 从 样式 变 为 红色 文字 。 如 果 去 挥 !important， 则 依照 优先 级 最 高 的 ID 选 
择 符 变 为 黄色 文学 。 


LLL 使 用 COS 注释 


用 户 可 以 在 CSS 中 插入 注释 来 说 明代 码 的 意思 ， 注 释 有 利于 目 己 或 别人 以 后 编辑 和 更 
改 代码 时 理解 其 含义 。 在 浏览 右 中 ， 注 释 是 不 显示 的 。CSS IEEE) "Ue" JpXh. LÀ "g^ 
结尾 。 


例如 : 
l* 4E XP GE T 
p 
| 


text-align: center; /* 文本 大 中 排列 */ 
color: black; /* 文字 为 黑色 */ 
font-family: arial /* 字体 为 arial */ 

Í 
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CSS 盒 模 型 对 于 使 用 DIV+CSS 布局 的 方法 来 说 是 非常 重要 的 概念 ， 因 为 盒 模型 是 
CSS 定位 布局 的 核心 内 容 。 读 者 在 学 习 了 布局 网 页 基本 方法 以 后 ， 只 需要 利用 div 元 素 和 
列表 元 素 即 可 完成 页 面 中 大 部 分 的 布局 工作 。 但 是 前 面 学 习 的 知识 更 注重 实践 操作 ， 读 
者 并 不 理解 布局 的 原理 ， 和 常常 在 布局 页 面 的 过 程 中 遇 到 无 法 理解 的 问题 。 在 学 习 本 市 的 
盒 模型 的 知识 以 后 ， 读 者 将 拥有 较 完 善 的 布局 观 ， 基 本 上 可 以 做 到 使 用 代码 完成 
DIV+CSS 的 布局 操作 。 


Vn S 盒 模 型 概念 


HTML 中 大 部 分 的 元 素 〈( 特 别 是 块 状元 素 ) 都 可 以 看 作 是 一 个 盒子 ， 而 网 页 中 元 素 
的 定位 实际 上 就 是 这 些 大 大 小 小 的 盒子 在 页 面 中 的 定位 。 当 某 个 块 状元 素 被 CSS 设置 了 
浮动 属性 以 后 ， 这 个 盒子 束 会 目 动 排 到 上 一 行 。 网 页 布局 即 关 注 这 些 盒子 在 页 面 中 如 何 
摆 放 、 如 何 骸 套 的 问题 ， 而 这 么 多 的 盒子 摆 在 一 起 ， 最 需要 关注 的 是 对 盒子 尺寸 的 计 
算 、 是 个 流动 (float) 等 要 素 。 为 什么 要 把 HTML 元 素 作 为 全 模型 来 研究 呢 ? 因为 
HTML 元 素 的 特性 和 一 个 盒子 非常 相似 ， 盒 子 里 和 面 的 内 容 到 盒子 边框 之 间 的 距离 即 填充 
(padding)， 人 盒子 本 喘 有 边框 (border)， 例 子 边框 外 和 其 他 盒子 之 间 有 边界 (margin )， 
具体 效果 如 图 2-14 Pros. 

大 多 数 HTML 元 素 的 结构 类 似 于 图 2-9 所 示 ， 除 了 包含 的 内 容 ( 文 本 或 图 片 ) 外， 还 
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有 内 边 距 、 边 框 和 外 边 距 一 层 层 的 包 吉 。 读 者 在 布局 网 页 和 定位 HTML 7628 IF] 2 752) Hl 75 
导 这 些 要 素 ， 这 样 才 可 以 更 加 目 如 地 摆 卉 这 些 盒子 。 


height (高 度 ) 


图 2-14 盒 模型 示意 图 


外 边 距 属性 即 CSS 的 margin 属性 ， 在 CSS 中 可 拆 分 为 margin-top 〈 顶 部 外 边 距 )、 
margin-bottom 〈 底 部 外 边 距 )、margin-left〈 左 边 外 边 距 ) 和 margin-right 〈 右 边 外 边 距 )。 
CSS 的 边框 属性 (border) 和 内 边 距 属性 (padding) 同样 可 以 拆 分 为 4 边 。 在 Web 标准 中 ， 
CSS 的 width 属性 即 为 盒子 押 包 介 内 容 的 宽度 ， 而 整个 盒子 的 实际 宽度 为 : 

盒子 宽度 = 

padding-left+border-left+margin-leftt+width+padding-right+border- right+margin-right 

相应 地 ，CSS 的 height 属性 即 为 盒子 所 包含 内 容 的 高 度 ， 而 整个 盒子 的 实际 高 度 为 : 

ATAR- 

margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom 

EEH RRE RLE, HP ERRERA PILAR: 

1) AIHE ELA ATH, HMEN KARA, RIBÉ ES AS TE. 

2) 填充 值 不 可 以 为 负 值 。 

3) 对 于 块 级 元 素 ， 示 浮动 的 亚 直 相 邻 元 素 的 上 边界 和 下 边界 会 锐 压 罗 。 

4) 对 于 浮动 元 素 ， 边 界 不 压缩 ， 并 且 夺 浮动 元 素 不 声明 宽度 ， 则 其 党 度 趋向 于 0。 

5) 如 条 盒 中 没有 任何 内 容 ， 不 管 宽 度 和 高 度 值 设置 为 多 少 ， 都 不 会 被 显示 。 

1E CSS F, width 和 height 指 的 是 内 容 区 域 element) 的 宽度 和 高 度 。 增 加 内 边 距 、 边 
框 和 外 边 距 不 会 影响 内 容 区 域 的 尺寸 ， 但 会 增加 元 素 框 的 总 尺寸 。 假 设 框 的 每 个 边 上 有 10 
像素 的 外 边 距 和 5 像素 的 内 边 距 ， 如 果 和 希望 这 个 元 素 框 达到 100 像素 ， 就 需要 将 内 容 的 宽度 
设置 为 70 像素 。 以 下 是 CSS 代码 : 

#box { 


width: 70px; 
margin: 10px; 


padding: 5px; 
j 


如 图 2-15 所 示 。 
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2-15 ”实例 示意 图 


Z5 ， ANAE margin 的 控制 


在 CSS 中 margin 属性 可 以 统一 设置 ， 也 可 以 上 、 下 、 左 、 右 分 开设 置 。 创 建 HTMLS 
网 页 文件 ， 命 名 为 box margin.html， 此 文件 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 外 边 踊 设置 </title> 
<style type="text/css"> 
* {margin: Opx;} 
#all{width:600px; 
height:500px; 
margin:Opx auto; 
background-color:ZFF9900;; 
#a,#b,#c,#d,#e{ 
width:200px; 
height: 100px; 
text-align:center; 
line-height:100px; 
background-color:ZFFFF00;j 
#a{margin-left:30px; 
margin-bottom:30px;} 
#b{margin-left:5px; 
margin-right:5px; 
margin-top:5px; 
margin-bottom:5px; 
float:left; 
j 


#c{margin-bottom: 5px; 
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float:right; 
j 
#d{ 
float:right; 
#e{ margin-left:5px; 
float:left; 
j 
</style> 
</head> 
<body> 
«div 1d="all"> 
«div id="a">a 盒子 </div> 
«div id="b">b 盒子 </div> 
«div id="c">c 盒子 </div> 
«div id="d">d A F </div> 
«div id="e">e 盒子 </div> 


</div> 


</body> 
</html> 


为 了 更 方便 地 看 到 div 的 表现 ， 这 里 给 外 部 div 设置 了 枯黄 色 背 景色 ， 并 给 内 部 div 设 
置 了 黄 背 景色 。 这 个 实例 非常 典型 ， 特 别 是 b 盒子 、c 盒子 、d 盒子 和 e 盒子 之 间 的 关系 ， 
其 在 浏览 右 中 浏览 效果 如 图 2-16 所 示 。 
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2-16 ”外 边 距 margin 控制 后 实现 的 效果 图 


1) 首先 为 盒子 al 设置 了 “marsin:0px auto;” 必 性， 所 以 宽 600px、 高 500px, BRE 
为 贰 色 的 盒子 目 适 应 浏览 占 居 中 ， 这 在 布局 中 经 常用 到 。 


» 


2) a fx fix BH J fa(margin-left30px;margin-bottom:30px;?, EN ZE 3ZU RUE XLI] bs BE N 
30px。 
3) 由 于 b 盒子 设置 了 问 左 浮动 ， 紧 随 其 后 的 c 盒子 设置 了 右 浮 动 ， 所 以 目 然 移 上 来 ， 
Tl 盒子 并 列 在 同一 行 ，b 盒子 的 高 度 为 : 
height-margin-top--margin-bottom-110 〈 像 素 ) 


TML5t*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


height+margin-bottom=105 RZ) 
HA. mre BB BAKEA T eue E ERER ELE ME. 
4) c 盒子 设置 了 碳 译 动 ，e 盒子 设置 了 左 浮 动 ， 所 以 两 个 盒子 显示 的 是 左右 互 换 的 位 置 。 


ss q3E border 的 样式 设置 


边框 (border〉 作为 盒 模 型 的 组 成 部 分 之 一 ， 其 样式 非常 受用 户 重视 。 边 框 的 CSS 样式 
设置 不 仪 影 响 到 盒子 的 尺寸 ， 还 影响 到 盒子 的 外 观 。 边 框 Cborder) 属性 的 值 有 3 种 ， 即 边 
框 尺 寸 〈《 像 素 )、 边 框 类 型 和 边框 颜色 《十 六 进 制 )。 创 建 HTMLS 网 页 文件 ， 命 名 为 
box _ borderhtml， 此 文件 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 边 框 样 式 设置 </title> 
«style type="text/css"> 
* {margin:0px;} 
#all{ width:490px; 
height:400px; 
margin:Opx auto; 
background-color:ZFF9900; 
#a,#b,#c,#d,#e,#f{,#g{ width:180px; 
height:70px; 
text-align:center; 
line-height:60px; 
background-color:799FF00;! 
zat width:A00px; 
margin: 7px; 
border:1px solid #000000;} 
#b{ border:30px solid 7996600; 
float:left; } 
#c{ margin-left:6px; 
border:30px groove #0099FF; 
float:left; 
j 
#d{ margin-left:6px; 
border:2px dashed #000000; 
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float:left; } 

#e{ margin-left:6px; 
border:2px dotted #000000; 
float:left; } 

#f{ margin:6px; 
border-left:2px solid #0000FF; 
border-top:2px solid #0000FF; 
border-right:2px solid #CC3300; 
border-bottom:2px solid #CC3300; 


float:left; } 
#g{ margin-top:6px; 
border-top:2px groove #999999; 
float:left; 
j 
</style> 
</head> 
<body> 
<div id="all"> 
«div id="a">a £x J </div> 
«div id="b">b AT (solid > AN) </div> 
«div id="c">c 盒子 〈groove 类 型 ) </div> 
«div id="d">d AT (dashed 类 型 ) </div> 
«div id="e">e 盒子 〈dotted 类 型 ) </div> 
«div id-"f'-f J </div> 
«div id="g">g 盒子 </div> 
</div> 
</body> 
</html> 


为 了 更 方便 地 看 到 div 的 表现 ， 这 里 给 外 部 div w E J #FF9900 背景 色 ， 并 给 内 部 div 设 
置 了 #99FF00 背景 色 。 在 浏览 右 中 的 浏览 ， 效 果 如 图 2-17 所 示 。 


El x | 
A 
(23) © E) DAboolADIV+CSS\chap01\box O ~ C | G 边框 栏 式 设置 x | W w io 


dashed 类 型 ) eT (dotted 


2-17 边框 样式 设置 


M HTML5-*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


这 个 例子 使 HTML 对 和 象 看 起 来 更 像 是 个 合子， 边框 只 是 盒子 包 涛 中 的 一 层 ， 最 外 层 的 
包装 是 不 可 见 的 外 边 距 。 边 框 的 党 上 度 计算 非 党 重要， 读者 定位 元 素 时 要 充分 考虑 边框 党 度 。 
边框 的 常用 设置 方法 如 下 : 

Border: 宽度 类 型 颜色 ; 

这 是 4 条 边框 统一 设置 的 方法 ， 如 果 要 分 别 设置 4 条 边框 ， 将 border MN border-top COH 
部 边框 )、border-bottom GRAZE), border-left CAHE) MH border-right CHIE). XJF “Æ 
型 ”可 以 修改 成 不 同样 式 的 边框 线条 ， 和 常用 的 有 solid CER), dashed (Ek), dotted (点 状 
线 )、groove OTIR), double OXZ), outset CFR) 等 ， 读 者 可 以 逐个 尝试 。 


/内 边 距 padding 的 设置 


AIEE (padding) 类似 于 HTML 中 表格 单元 格 的 填充 属性 ， 即 盒子 边框 和 内 容 之 间 的 
距离 。 内 边 距 (padding) 和 外 边 距 (margin) 很 相似 ， 都 是 不 可 见 的 盒子 组 成 部 分 ， 只 不 过 
内 边 距 (padding) 和 外 边 距 (margin) 之 间 夹 看 边框 。 创 建 HTMLS 网 页 文件 ， 命 名 为 
box_padding.html， 文 件 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 内 边 距 的 设置 </title> 
«style type="text/css"> 
*{ margin:0px;} 
#all{width:460px; 
height:400px; 
margin:Opx auto; 
padding:50px; 
background-color:ZFF9900;! 
#a,#b,#c,#d,#e,#f,#g (width:200px; 
height:80px; 
border:1px solid #0000FF; 
background-color:Z00FF00;! 
píwidth:100px; 
height:50px; 
padding-top:20px; 
background-color:ZCC99CC; | 
#a{padding-left:70px;} 
#b{padding-top:60px;} 
#c{padding-right:SOpx;} 
#d{padding-bottom:40px;} 
</style> 
</head> 
<body> 
«div 1d="all"> 
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«div id="a"> 
«p»a 盒子 </p> 
</div> 

«div id="b"> 
<p>b 盒子 </p> 
</div> 

«div id="c"> 
<p>c 盒子 </p> 


</div> 
«div 1d="d"> 
«p»d 盒子 </p> 
</div> 

</div> 

</body> 

</html> 


为 了 更 方便 地 看 到 div 的 表现 ， 这 里 给 外 部 div we #FF9900 背景 色 ， 并 给 内 部 div Wt 
团 了 #0OOEFF00 背景 色 ， 而 给 p 元 素 设置 了 #HCC99CC 背景 色 。 在 浏览 器 中 的 浏览 效果 如 图 2-18 
所 示 。 


OG &) DAbook\DIV+CSS\chap01\box _padding.l -ol E 内 边 距 的 设置 


2-18 ”内 边 距 的 设置 


c Ela Divecss 网 页 基础 布局 


网 站 做 出 来 是 给 浏览 者 使 用 的 ， 要 对 浏览 者 共有 亲和力 ，DIV+CSS 在 这 方面 更 具 优 
势 。 由 于 CSS 富 含 丰富 的 样式 ， 使 页 面 更 加 灵活 ， 它 可 以 根据 不 同 的 浏览 右 达 到 显示 效果 
的 统一 和 不 变形 。 使 用 DIV+CSS 布局 网 页 可 以 保持 视觉 的 一 致 性 ， 使 用 以 往 表格 般 套 的 制 
作 方 法 ， 会 使 页 面 与 页 面 或 者 区 域 与 区 域 之 间 的 显示 效果 有 偶 甜 。 使 用 DIV+CSS 的 制作 方 
法 ， 将 所 有 页 面 或 所 有 区 域 统一 用 Css 文件 控制 ， 避 人 免 了 不 同 区 域 或 不 同 页 面体 现 出 的 效 
果 偏 关 。 由 于 将 大 部 分 页 面 代码 写 在 了 CSS 当中 ， 使 得 页 面体 积 容 量变 得 更 小 。 相 对 于 表 
REII, DIV-CSS 将 页 面 独立 成 更 多 的 区 域 ， 在 打开 页 面 的 时 候 逐 层 加 载 ， 而 不 像 
表格 般 套 那样 将 整个 页 面 较 在 一 个 大 表格 里 ， 使 得 加 载 速度 很 慢 。 本 和 曹 将 详细 介绍 
DIV+CSS 布局 网 页 的 基础 方法 。 
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div 元 素 的 基础 知识 


在 学 习 了 Web 标准 的 概念 以 及 DIV 和 CSS 的 基本 知识 之 后 ， 还 要 学 习 如 何在 HTML 
中 应 用 div 标签 进行 网 页 的 布局 ， 在 这 里 控制 布局 的 工具 是 CSS 代码 ， 这 样 可 以 使 网 页 更 加 
符合 Web 标准 。 本 节 主 要 介绍 div 元 素 的 基础 知识 和 HTML 元 素 的 分 类 与 应 用 。 


ly 标 侈 控制 方法 


div 标签 在 Web 标准 的 网 页 中 使 用 非常 频繁 ， 相 对 于 其 他 HTML 继承 而 来 的 元 素 ，div 
有 什么 特别 之 处 呢 ? 其 实 div 标签 跟 其 他 应 用 很 类 似 ， 一 定 要 说 其 特性 ， 不 过 是 一 种 网 页 编排 
的 元 素 。 正 因为 div 没有 任何 特性 ， 所 以 需要 通过 使 用 CSS 代码 对 其 进行 样式 的 控制 。 

Div 标签 是 双 标 签 ， 在 前 面 介绍 概念 时 已 提 到 它 的 以 <div></div> 的 形式 存在 ， 其 间 可 以 
放置 任何 内 容 ， 包 括 其 他 的 div 标签 。 也 就 是 说 ，div 标签 是 一 个 没有 任何 特性 的 容器 。 创 
建 一 个 标准 的 HTMLS 文档 ， 命 名 为 divindex.html。 此 文件 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>div 标签 </title> 
</head> 

<body> 

<div> 第 1 个 div 标签 </div> 
<div> 第 2 个 div 标签 </div> 
<div> 第 3 个 div 标签 </div> 
<div> 第 4 个 div 标签 </div> 
</body> 

</html> 


建立 站 点 文件 夹 并 设置 好 IIS， 在 浏览 器 中 浏览 ， 效 果 如 图 3-1 所 示 。 


j D div 标 答 
- > QC fi [file///D/book/DIV*CSS/chap02/divindex. 7: 国 
第 1 个 div 标 签 


第 2 个 div 标 签 
第 3 个 diy 标 签 


第 4 个 div 标 签 


图 3-1 实例 运行 的 效果 


"s HTML5-4*CSS-*JavaScript 网 页 布局 从 入 门 到 精通 


在 没有 CSS 的 帮助 下 ，div 标签 没有 任何 特别 之 处 ， 只 是 无 论 怎 么 调整 浏览 器 窗口 ， 
个 div 标签 都 各 占据 一 行 。 即 默认 情况 下 一 行 只 能 容纳 一 个 div 标签 。 

那么 怎么 才能 实现 对 div 的 CSS 控制 呢 ? 这 里 我 们 对 div 通过 id 选择 符 加 入 CSS X 
53, f div 拥有 背景 色 以 及 宽度 ， 修 改 divindex.html 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>div 标签 </title> 

«style type="text/css"> 

#no1,#no2 {background-color:#eee; 
j 
#no3,#no4 {background-color:#999; 

width:300px; 
j 

</style> 

</head> 

<body> 

<div id="nol"> 第 1 个 div 标签 </div> 

«div id="n02"> 28 2 个 div 标签 </div> 

«div id-"no3" >% 3 个 div 标签 </div> 

«div id="no4"> 第 4 个 div 标签 </div> 

</body> 

</html> 


在 浏览 器 中 的 浏览 ， 效 果 如 图 3-2 所 示 。 


J D div 标 答 
- > Œ fi D file///D:/book/DIV*CSS/chap02/divindex. ;: 国 


第 1 个 div 标 签 
第 2 个 div 标 签 


3-2 ”设置 背景 的 div 标签 
通过 背景 色 的 设置 ， 可 以 看 出 对 div 的 CSS 控制 只 要 对 需要 控制 的 div 命名 id， 然 后 写 


入 相应 的 CSS 控制 代码 ， 即 可 配对 目 动 实现 控制 。div 标签 默认 占据 一 行 ， 完 度 也 为 一 行 。 
通过 宽度 设置 可 以 发 现 ， 并 不 是 因为 div 的 宽度 为 一 行 ， 导 致 无 法 容纳 后 和 面 的 div 标签 ; 无 
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论 宽度 多 小 ， 一 行 始终 只 有 一 个 div 标签 ， 读 者 需 谨 记 ! 

div 标签 作为 网 页 CSS 布局 的 主要 元 系 ， 其 优势 已 丝 非常 明显 。 相 对 于 表格 布局 ，div 
更 加 灵活 ， 因 为 div 只 是 一 个 没有 任何 特性 的 容 句 ，CSS 可 以 非常 灵活 地 对 其 进行 控制 ， 组 
成 网 页 的 每 一 块 区 域 。 在 大 多 数 情况 下 ， 仅 仅 通过 div 标签 和 CSS 配合 即 可 完成 页 面 的 G) 
布局 。 

在 用 CSS 控制 网 页 布局 时 可 能 会 遇 到 一 个 问题 : 在 定义 一 个 属性 时 ， 是 使 用 id， 还 是 
使 用 class 呢 ?” 在 此 作者 把 目 己 平时 的 经 验 给 大 家 人 简要 介绍 一 下 ,希望 能 够 对 读者 有 所 
帮助 。 

1) id 的 使 用 原则 

id 具有 唯一 性 ， 其 使 用 原则 也 是 依据 这 一 特性 建立 的 。id 是 不 能 重复 的 ， 所 以 在 HTML 
的 结构 中 大 结构 一 定 要 用 id， 例 如 标志 、 导 航 、 主 体内 容 、 版 权 。 这 些 根 据 规范 命名 为 
4logo. nav. #content, f£copyright 等 ， 本 独 其 唯一 性 的 原则 ， 建 议定 义 记 尽量 在 网 页 的 外 
围 盒子 中 使 用 。 

2) class 的 使 用 原则 

class 在 CSS 的 定义 中 具有 兽 裔 性， 即 class 可 重复 、 无 限制 地 使 用 多 次 ， 建 议 大 家 尽量 
在 结构 内 部 使 用 。 这 样 做 的 好 处 是 有 利于 网 站 代码 的 后 期 维护 与 修改 ， 让 上 所 有 的 class 都 成 
为 id 的 和子 级 或 是 孙 级 。 在 写 CSS 的 时 候 可 以 写成 #fatherchild{...}。 另 外 需要 注意 尽量 不 要 
让 class 包含 id， 例 如 写成 .father#child{...} 束 很 不 好 。 当 然 ， 这 只 是 对 良好 书写 习惯 的 一 些 
建议 。 

综 上 所 述 : id 是 唯一 的 并 且 是 父 级 的 ，class 是 可 以 重复 的 并 且 是 子 级 的 。 无 论 怎样 ， 保 
持 一 个 良好 的 代码 书写 习惯 对 于 我 们 以 后 的 代码 维护 会 有 很 大 的 帮助 。 


om 中 的 元 素 ) 


HTML 布局 的 核心 标签 是 div，div 属于 HTML 中 的 块 级 元 素 。 

HTML 的 标签 默认 为 两 种 元 素 : 

1. 块 状元 素 

该 元 素 是 矩形 的 ， 有 自己 的 高 度 和 宽度 。 在 默认 情况 下 ， 在 父 容器 中 占据 一 行 ， 同 一 行 
无 法 容纳 其 他 元 素 及 文本 。 其 他 的 元 素 将 显示 在 其 下 一 行 ， 价 单 地 说 ， 我 们 可 以 将 它们 看 作 
是 被 块 级 元 素 “ 挤 ”下 去 的 。 块 状元 素 就 是 一 个 矩形 容器 ， 边 缘 非 党 便 ，CSS 议 置 了 高 度 和 
宽度 后 ， 形 状 无 法 被 改变 。 

2. 内 联 元 素 

和 块 状 元 素 相 反 ， 内 联 元 素 没 有 固定 形状 ， 也 无 法 设置 宽度 和 高 度 。 内 联 元 素 形 状 由 其 
内 容 决 定 ， 所 以 在 宽度 足够 的 情况 下 一 行 能 容纳 多 个 内 联 元 素 。 有 人 说 相对 于 块 级 元 素 是 一 
个 便 盒 子 ， 内 联 元 素 是 一 个 软 布袋 子 〈( 形 状 由 内 容 决定 )。 

块 状元 素 适 合 于 大 块 的 区 域 排版 ， 所 以 党 用 来 布局 页 耐 。 而 内 联 元 素 适 合 于 局 部 元 素 的 
样式 设置 ， 所 以 常用 于 局 部 的 文字 样式 设置 。HTML 中 常用 的 块 状元 素 和 内 联 元 素 及 功能 如 
K 3-1 所 示 。 
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表 3-1 块 状元 素 和 内 联 元 素 表 


块 状元 素 内 联 元 素 
Address: 地 址 a: PHA 
Blockquote: 块 引用 abbr: 缩写 
center: 居中 对 齐 块 acronym: 首 字 
dir: 目录 列表 b: 粗 体 〈 不 推荐 ) 
div: 常用 块 级 元 素 ， 也 是 CSS layout 的 主要 标签 bdo: bidi override 
dl: 定义 列表 big: 大 字体 
fieldset: form 控制 组 br: 换行 
form: 交互 表单 cite: 引用 
hl: 大 标题 code: 计算 机 代码 (在 引用 源码 的 时 候 需 要 ) 
h2: 副标题 dfn: 定义 字段 
h3: 3 级 标题 em: 强调 
h4: 4 级 标题 font: 字体 设 定 〈 不 推荐) 
h5: 5 级 标题 i: 斜体 
h6: 6 级 标题 img: KA 
hr: 水 平分 阳线 input: 输入 框 
isindex: input prompt kbd: 定义 键盘 文本 
menu: 菜单 列表 label: 表格 标签 
noframes: frames 可 选 内 容 〈 对 于 不 文 持 frame 的 浏览 器 显示 此 | q: 短 引 用 
区 块 内 容 ) s: 中 划 线 (不 推荐 ) 
noscript: 可 选 脚本 内 容 《〈 对 于 不 文 持 script 的 浏览 器 显示 此 内 | samp: 定义 范例 计算 机 代码 
容 ) select: 项 目 选 择 
ol: 有 序 表单 small: 小 字体 文本 
p E span: 常用 内 联 容 器 ， 定 义 文本 内 区 块 
pre: 格式 化 文本 strike: 中 划 线 
table: 表格 strong: 粗 体 强调 
ul: 无 序列 表 sub: 下 标 
sup: 上 标 
textarea: 多 行文 本 输入 框 
tt: 电 传 文本 


var: 定义 变量 
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如 果 要 使 用 div 元 素 进 行 网 页 布局 ， 首 先 要 学 会 使 用 CSS 灵活 地 控制 div 元 素 的 样式 。 
本 节 通 过 几 个 常用 的 实例 学 习 div 元 素 的 多 种 样式 设置 ， 使 读者 快速 理解 div 元 素 。 作 为 单 
个 div 元 素 ，width 属性 用 于 设置 其 宽度 ，height 属性 设置 其 高 度 ， 常 以 像素 (x) 作为 固定 
尺寸 的 单位 。 在 HTML 元 素 中 设置 样式 不 需要 填写 单位 ， 默 认为 像素 。 


当 单 位 为 百分比 时 ，div 元 素 的 宽度 和 高 度 为 目 适 应 状态 ， 即 宽度 和 高 度 根据 浏览 器 窗 
口 尺 寸 而 变化 。 


在 前 面 创建 的 站 点 文件 夹 内 创建 名 为 divset.html 的 文件 ， 此 文件 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> w & div 样式 </title> 
<style type="text/css"> 


0 2238. ONE 


Zone { 
background-color: ccc; 
border:1px solid #000; 


width:200px; > 
height: 100px; 
j 


#two 1 
background-color: ccc; 
border:1px solid #000; 
width:50%; 
height:25%; 


j 
«/style»«/head^ 


<body> 

«div id="one"> [i| zE DIV 的 宽度 和 高 度 </div> 
«hr /> 

«div id='"two"> 上 自 适 应 DIV 的 宽度 和 高 度 </div> 
</body> 

</html> 


浏览 效果 如 图 3-3 所 示 。 


c i 5) £) DAbooki\DIYV+CSS\chap Ø ~ C 图 DAbook\DIV+CSS\chap D - È | @ 28de x| | 从 


3-3 ”设置 div 样式 


实例 中 第 1 个 div 宽度 和 高 度 回 定 ， 形 成 了 一 个 盒子 ， 宽 度 和 高 度 是 不 可 以 改变 
的 。 第 2 个 div Qu ht — SAREE 宽度 的 变化 而 变化 。 第 2 个 div 
的 高 度 设 置 为 23%， 按 理 说 其 高 度 应 该 随 看 浏览 器 高 度 的 变化 而 变化 ， 然 而 在 实例 中 
div 高 度 仅 和 文本 高 度 相 当 ， PEN 度 设置 没有 起 作用 。 这 是 因为 设置 高 度 目 适 应 有 一 
个 前 提 ， 即 div 的 和 高度 上 日 适应 是 相对 于 父 容器 的 高 上 度 ， 实 例 中 div 父 容器 为 body 或 者 
HTML. body 或 者 HTML 在 本 例 中 没有 设置 高 度 ，div 的 高 度 目 适应 没有 参照 物 ， 因 此 
无 法 生效 。 


"d 
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如 果 在 CSS 中 设置 body 和 HTML 的 高 度 ， 就 可 以 解决 div 的 高 度 自 适应 问题 。body 
和 HTML 的 高 度 直接 设置 为 100% 即 可 ， 不 会 对 页 面 有 任何 影响 。 在 编码 中 的 CSS 部 分 
加 入 以 下 代码 : 
HTML,body {height:100%;} 


为 了 考虑 多 种 浏览 器 的 兼容 性 ，HTML F body 同时 设置 为 100% 宽 度 。 在 浏览 器 中 浏 
览 ， 效 果 如 图 3-4 所 示 。 


图 3-4 设置 div 标签 的 高 度 适应 后 的 效果 


在 调整 浏览 器 珊 度 之 后 ， 第 2 个 div 的 高 度 随 之 变化 。 各 种 浏览 器 对 HTML 和 CSS 的 
解析 方式 有 差异 ， 我 们 在 后 面 将 详细 讨论 解决 办 法 ， 以 解决 浏览 器 的 兼容 性 问题 。 


| Section. 


EO DIV+(SS 基础 布局 


本 市 主要 介绍 使 用 DIV 进行 网 页 布局 的 基础 操作 ， 包 括 网 页 宽度 的 大 小 设置 ， 网 页 
DIV 布局 中 巡 到 的 一 些 基 础 操作 ， 如 水 平 居 中 、 舱 套 、 译 动 等 。 


3.2.1 网 由 IS DE Hy 设置 


由 于 网 页 访问 者 的 计算 机 的 显示 分 辨 率 各 不 相同 ， 第 见 的 显示 分 辨认 有 《单位 为 像 
Z) 800x600. 1024x768. 1280x1024 等 ， 所 以 在 布局 页 面 时 用 户 要 充分 考虑 页 面 内 容 的 
布局 宽度 ， 一 旦 内 容 宽度 超过 了 显示 宽度 ， 页 面 将 出 现 水 平 滚动 条 。 对 于 页 面 的 高 度 ， 
尽量 保证 网 页 只 有 牌 直 滚动 条 才 符 合 浏览 者 的 习惯 ， 所 以 对 高 度 不 需要 考虑 ， 由 页 面 内 
7E xe IN] v4 i8 RE e 

页 面 布局 宽度 一 般 考 虑 最 小 显示 分 辨 率 的 浏览 用 户 ， 即 过 去 浏览 用 户 的 显示 分 辨 率 最 小 
为 800x600 (15 `F CRT 显示 器 )， 其 最 小 宽度 为 800 像素 。 浏 览 右 的 边框 及 滚动 条 部 分 约 占 
24 像素 ， 所 以 布局 宽度 为 分 辨 率 的 水 平 像素 减 去 24 像素 。 因 此 ， 过 去 网 页 布局 宽度 一 般 为 
778 像素 ， 如 末 再 宽 了 驶 会 使 页 面 产生 水 平 滚动 条 。 由 于 计算 机 设备 飞速 发 展 ， 现 在 使 用 
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800x600 显示 分 辨 率 的 用 户 已 经 很 少 了 ， 页 面 布局 宽度 一 般 不 超过 980-1000 像素 (如 图 3-5 
所 示 ， 考 虑 到 最 小 宽度 1024 像素 ， 即 1024x768 ERDIZ). 


定义 宽 为 980 或 者 1000 像素 


© OE DAyigou VIE html 


[H] 55 T 
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青春 继续 破 世 界 纪录 
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3-5 网 页 的 宽度 设计 
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在 制作 网 页 的 时 候 ， 通 第 需 要 将 整个 网 页 的 内 容 在 浏览 器 中 居中 显示 ， 在 使 
用 HTML 表格 布局 页 面 时 ， 只 需要 设置 布局 表格 的 align 属性 为 center 即 可 。div 居中 没有 属 
性 可 以 设置 ， 只 能 通过 CSS 控制 其 位 置 。 在 布局 页 面 之 本， 网 页 设计 者 一 定 要 把 页 面 的 默 
认 边 距 清除 。 为 方便 操作 ， 香 用 的 方法 是 将 所 有 对 象 的 边 距 清除 ， 即 设置 margin 属性 和 
padding 属性 。margin 属性 代表 对 象 的 外 边 距 CE. PF. Zr. Æ), padding 属性 代表 对 象 的 
内 边 距 ， 也 叫 填充 Cb. P. Æ A). margin 属性 和 padding 属性 类 似 于 表格 单元 格 的 
cellspacing 属性 和 cellpadding 属性 ， 不 过 margin 属性 和 padding 属性 作用 于 所 有 块 状元 和 又。 

使 div 元 素 水 平 居 中 的 方法 有 多 种 ， 常 用 的 方法 是 用 CSS 设置 div AE, AAE, B 
margin-left 属性 和 margin-right 属性 。 当 设置 div 左 外 边 距 和 右 外 边 距 的 值 为 auto《〈 目 动 ) 
时 ， 左 外 边 距 和 右 外 边 距 相等 ， 即 达到 了 div 水 平 居 中 的 效果 。 

在 站 点 目录 下 创建 一 个 标准 的 HTMLS 文档 ， 命 名 为 divalign.html， 此 文件 的 代码 
如 下 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> KF jE P </title> 
<style type="text/css"> 
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HTML,body (height: 1009/6; 
* imargin:Opx; 
padding:Opx; 
j 
#web (width: 7596; 
height: 1009/6; 
background-color:Zccc; 
border: 1px solid #000; 
margin-left:auto; 
margin-right:auto; 
j 
</style> 
</head> 
<body> 
«div id="web"> 这 里 是 整个 网 页 的 内 容 </div> 
</body> 
</html> 


在 浏览 器 中 浏览 ， 效 果 如 图 3-6 所 示 。 


3-6 ”设置 水 平 居 中 的 效果 
设置 外 边 距 的 CSS 代码 可 以 进一步 简化 ， 使 用 margin 属性 ， 编 码 方法 为 : 
margin:Opx auto; 
VE BB: 
margin 属性 值 前 面 的 0 代表 上 边 距 和 下 边 距 为 0 像素 ，auto 代表 左边 距 和 右边 距 为 
auto， 即 自动 设置 。 这 里 0px 和 auto 之 间 使 用 空格 符号 分 隔 ， 不 是 使 用 各 号 ， 
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为 了 实现 复杂 的 布局 结构 ，div Rx AHBE.T IDE UB Sm e. X 
为 div 元 素 多 重 租 套 将 影响 浏览 器 对 代 公 的 解析 速度 。 在 站 点 文件 夹 中 创建 一 个 标准 的 
HTMLS5 文档 ， 命 名 为 divindiv.html， 此 文件 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>div 般 套 </title> 
«style type="text/css"> 
* imargin:Opx; 
padding:Opx; 
j 
?tweb (width:778px; 
height:500px; 
background-color:£ccc; 
margin:Opx auto; 
j 
#banner (width:500px; 
height:250px; 
background-color:Zeee; 
border:1px solid #000; 
margin:0px auto; 
j 
foot (width:500px; 
height:250px; 
background-color:£Zeee; 
border:1px solid #000; 
margin:0px auto; 
j 
«/style»«/head^ 
<body> 
<div id="web"> 
<div id="banner">banner</div> 
<div id="foot">foot</div> 
</div> 
</body> 
</html> 


本 实例 综合 了 居中 的 知识 ， 内 部 的 两 个 div 水 平 居 中 在 其 父 容器 (外 部 div) "P. EDU 
览 嚣 中 的 浏览 ， 效 果 如 图 3-7 所 示 。 


"s HTML5-4CSS-*JavaScript 局 页 布局 从 入 门 到 精通 
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panner 
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DL div 的 浮动 方法 


通过 div 布局 网 页 ， 结 果 是 一 个 div 标签 占据 一 行 ， 怎 样 才能 够 实现 布局 中 并 列 的 两 块 
区 域 呢 ? 块 状元 素 有 一 个 很 重要 的 “float” 属 性 ， 可 以 使 多 个 块 状 元 背 并 列 于 一 行 。float 属 
性 也 被 称 为 浮动 属性 。 在 对 前 面 的 div 元 素 设 置 浮动 属性 后 ， 当 前 面 的 div 7628 BH AE 92 1] 
FAWR, AEA div 元 素 将 目 动 浮上 来 ， 和 前 面 的 div 元 素 并 列 于 一 行 。Float 属性 可 选 
HEA lefts right, none 和 inherit. 

e 当 float 属性 值 为 inherit Hf, Z2 E, RREAK SRE, 

e 当 float 属性 值 为 none 时 ， 块 状元 素 不 会 浮动 ， 这 也 是 块 状元 素 的 默认 值 ; 

e 当 float 属性 值 为 left 时 ， 块 状元 双 将 问 左 浮动 : 

e 当 float 属性 值 为 right HF, BUD UE IRA TES. 

在 使 用 的 时 候 要 使 两 个 div 并 列 于 一 行 的 前 提 是 ， 这 一 行 有 足够 的 宽度 容纳 网 个 div 的 
宽度 。 下 面 以 实例 的 形式 来 讲解 div 的 浮动 设置 。 具 体 步 又 如 下 : 

(1) 打开 Dreamweaver CC 201$， 建 立 一 个 HIMLS 网 页 文件 ， 命 名 为 divfloat.html, HE 
文件 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
«title» iz E div 浮动 </title> 
<style type="text/css"> 

* {margin:0px; 
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padding:Opx; 
j 
first (width: 150px; 
height:100px; 
background-color:Zccc; 
border:1px solid #000; 
float:left; 
j 
#second ( width: 180px; 
height: 100px; 
background-color:Zeee; 
border:1px solid #000; 
float:left; 
j 
«/style»«/head^ 
<body> 
«div id-"first" 78 1 个 div</div> 
«div id-" second" 58 2 个 div«/div» 


</body> 
</html> 
(2) 实例 中 设置 了 两 个 div 不 同 的 宽度 和 背景 色 ， 在 浏览 器 中 浏览 ， 效 果 如 图 3-8 


所 示 。 
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A|3-8 设置 div 左 浮动 的 效果 


(3) 这 里 只 设置 了 两 个 div 元 素 问 左 浮动 ， 第 2 个 div 元 素 “ 流 ”上 来 了 ， 并 紧 挨 着 第 
1 个 div 元 素 。 接 下 来 设置 第 2 个 div 向 右 浮动 ， 代 码 如 下 : 


#second {width: 180px; 
height: 100px; 
background-color:#eee; 
border:1px solid #000; 


"s HTML54CSS- JavaScript CELITENBELI. 


float:right 
j 


(4) 在 浏览 器 中 浏览 ， 效 果 如 图 3-9 Bp. 
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3-9 div 左 浮 动 和 右 浮 动 


(5) 修改 后 第 2 个 div Ee RT Gua nx. x div 元 素 也 可 以 交 
换 位 置 。 即 设置 CSS 代码 如 下 : 


* {margin:0px; 
padding:0px; 
j 
first (width: 150px; 
height: 100px; 
background-color:Zccec; 
border:1px solid #000; 
float:right; 
j 
Ztsecond ( width: 180px; 
height: 100px; 
background-color:£Zeee; 
border:1px solid #000; 
float:left 


} 


(6) 在 浏览 堪 中 浏览 ， 效 果 如 图 3-10 所 示 。 

浮动 属性 是 CSS 布局 的 最 佳 利 桌 ， 用 户 可 以 通过 不 同 的 浮动 属性 值 灵活 地 定位 div 元 
素 ， 以 达到 灵活 布局 网 页 的 目的 。 块 状元 素 〈 包 括 div) 浮动 的 范围 由 其 被 包含 的 父 容 喜 决 
定 ， 以 上 实例 div 元 素 的 父 容器 束 是 body 或 html. 

为 了 更 加 灵活 地 定位 div 元 素 ，CSS 提供 了 clear 属性 。clear JE EEA none, lefts 
right 和 both， 默 认 值 为 none。 当 多 个 块 状元 素 由 于 第 1 个 设置 浮动 属性 而 并 列 时 ， 如 果 茶 
个 元 素 不 需要 被 “ 流 ” 上 去 ， 可 设置 相应 的 clear 属性 。 


c325 D I V+CSS PA DI AS it D. 


p= E 


[Gema > 


wE] 
H LT div 


图 3-10 交换 div 浮动 方向 


(1) 在 站 点 文件 夹 内 创建 HTMLS 文件 ， 命 名 为 divclear.html， 文 件 代 人 码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>div 的 清除 属性 </title> 

<style type="text/css"> 

* {margin:0px; 

padding:0px; 
j 

.Web (width:500px; 
height: 100px; 
background-color:Zccc; 
margin:Opx auto; 
j 

.one,.two,Zthreel ,Zthree2,Zthree3 Zthree4 ( width:150px; 
height:35px; 
background-color:£Zeee; 
border:1px solid #000; 
j 

.one (float:left; } 

.two{ float:right; } 

#three1 {clear:none; 

float:left; 

j 

#three2 (clear:right; } 

#three3 (clear:left; } 

#three4 {clear:both;} 
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</style></head> 
<body> 
«div class="web"> 
«div class="one"> 第 1 个 div</div> 
«div class="two'> 第 2 个 div</div> 
«div id="three1"> 第 3 个 div (clear:none:) </div> 
</div> 
«div class="web"> 
«div class="one"> 第 1 个 div</div> 
«div class="two"> 第 2 个 div</div> 
«div id="three2"> 第 3 个 div (clear:right;) </div> 
</div> 
«div class="web"> 
«div class="one"> 第 1 个 div</div> 
«div id="three3"> 第 3 个 div (clear:left:) </div> 
«div class="two"> 第 2 个 div</div> 
</div> 
«div class="web"> 
«div class="one"> 第 1 个 div</div> 
«div id="three4"> 第 3 个 div Cclear:both;) </div> 
«div class="two"> 第 2 个 div</div> 
</div> 
</body> 
</html> 


(2) 在 I 浏览 器 中 浏览 效果 如 图 3-11 所 示 。 


图 3-11 div 清除 属性 
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EL 网 页 布局 的 实例 


通过 前 面 综合 学 习 布 局 知识 ， 读 者 已 经 掌握 了 DIV+CSS 布局 的 基础 知识 ， 本 市 将 制作 
一 个 比较 典型 的 网 页 布局 实例 ， 首 先 分 析 这 个 例子 中 布局 的 要 求 。 

这 个 例子 要 求 页 面 有 上 下 4 行 区 域 ， 分 别 用 作 广 告 区 、 导 航 区 、 主 体 区 和 版 权 信息 区 。 
主体 区 又 分 为 堪 、 碳 两 个 大 区 ， 左 区 域 用 于 文章 列 表 ， 右 区 域 用 于 8 个 主体 内 容 区 。 看 上 去 
布局 区 域 比较 多 ， 用 表格 布局 需要 很 多 行 代码 才能 完成 ， 而 利用 DIV 和 CSS 可 以 很 好 地 完 
成 ， 并 且 代 人 码 比 较 简 涪 。 

根据 实例 要 求 作 图 ， 并 分 析 布 局 的 结构 ， 从 而 方便 编写 DIV 布局 的 结构 代码 ， 如 图 3-12 
所 示 为 网 页 布局 结构 分 析 图 ， 并 在 每 个 区 域 做 了 id 命名 〈# 余 号 开头 )， 以 方便 DIV 的 编写 。 


m" $ 
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图 3-12 网 页 布局 结构 分 析 


从 分 析 图 可 以 看 出 整个 页 面 的 结构 ， 其 中 #top 代表 广告 区 、#nav 代表 导航 区 、#mid 代 
KEK., Heft 代表 #mid 所 包含 的 左 区 域 、#ight 代表 #mid 所 包含 的 右 区 域 、#bottom 代表 
版 权 信息 区 。 

right 区 域 包含 6 个 具体 内 容 区 ， 由 于 这 些 内 容 区 的 尺寸 相同 ， 所 以 在 实例 中 使 用 class 
选择 符 作 为 统一 样式 ， 对 这 个 6 个 区 域 进行 CSS 样式 指定 。 根 据 结 构 分 析 图 可 以 编写 如 下 的 
HTML 部 分 的 结构 代码 : 


«div id="top">banner 区 域 </div> 
«div id="nav"> 导 航 区 </div> 
«div id="mid"> 
«div id="left"> 纵 向 左 导 航 区 </div> 
<div 1d="right"> 
«div class="content"> 内 容 A</div> 
<div class="content"> 内 容 B</div> 
<div class="content"> 内 容 C</div> 


d 
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«div class="content"> 内 容 D</div> 
«div class="content"> 内 容 E</div> 
«div class="content"> 内 容 F</div> 
</div> 
</div> 
<div id="bottom"> 底 部 版 权 区 </div> 


这 里 ， 在 6 个 具体 内 容 区 域 用 了 同一 个 class 名 称 的 选择 符 ， 用 于 在 CSS 中 指定 统一 的 
样式 。 创 建 网 页 文件 HTML5， 命 名 为 div_page.html， 此 文件 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 网 页 布局 实例 </title> 
«style type="text/css"> 
margin:Opx; 
padding:Opx; 
j 
#top,#nav,#mid,#bottom { 
width:778px; 
margin:Opx auto; 
#top{ 
height:80px; 
background-color:#00FF00;} 
#nav{ 
height:30px; 
background-color:#3333FF;} 
#mid{ 
height:350px;} 
#left{ 
width: 194px; 
height:350px; 
border:1px solid #999; 
float:left; 
background-color:#FF3333;} 
#right{ 
height:350px; 
background-color:#CCCC00; } 
.content{ 
width:19 1px; 
height: 174px; 
background-color:#FFFF00; 
border:1px solid #999; 
float:left; } 
#content2 (background-color:ZFFOOFF; } 
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#bottom { height:80px; 
background-color:#00FFFF;} 
</style> 
</head> 
<body> 
<div id="top">banner 区 域 </div> 
«div id="nav"> 导 航 区 </div> 
«div id="mid"> 
«div id="left"> 纵 向 导航 区 </div> 
<div 1d="right"> 
«div class="content"> 内 容 A</div> 
«div class="content" id="content2"> 内 容 B</div> 
«div class="content"> 内 容 C</div> 
«div class="content" id="content2"> 内 容 D</div> 
«div class="content"> 内 容 E</div> 
«div class="content" id="content2"> 内 容 F</div> 
</div> 
</div> 
«div id="bottom"> 底 部 版 权 区 </div> 


</body> 
</html> 


这 里 稍微 修改 了 HTML 部 分 的 代码 ， 选 择 了 4 个 具体 内 容 区 域 ， 加 上 了 id 名 称 为 
content2 的 属性 ， 这 是 为 了 使 这 4 个 区 域 有 不 同 的 背景 色 。 在 浏览 器 中 浏览 ， 效 果 如 图 3-13 
所 示 。 


OG E) DAbook\DIV+CSS\chap02\div_page.html p-dó | E 网 页 布局 实例 X | | 


Z] 3-13 网 页 布局 实例 


f HTML5+CSS+JavaScript 网 页 布局 从 入 门 到 精通 


本 例 综合 了 前 面 的 布局 知识 ， 例 如 居中 等 。 不 过 ， 由 CSS 代码 可 得 ， 主 体内 容 区 Cid 
名 称 为 mid) 的 宽度 是 778 像素 、 高 度 是 350 像素 。 

主体 内 容 区 (id 名 称 为 mid) 的 宽度 与 高 度 为 什么 会 和 内 含 的 div WRA mE? 这 水 
及 浏览 器 解析 CSS 时 对 宽度 和 高 度 的 计算 方法 ，IE7.0 浏览 器 和 FireFox 浏览 器 解析 div 的 宽 
度 和 高 度 设置 值 并 不 包括 边框 。 由 CSS 代码 可 得 ， 纵 癌 导 航 区 Gd 名 称 为 left 和 具体 内 容 
区 (class 名 称 为 content〉 的 边框 为 1 像素 粗 。 

宽度 和 高 度 计 算是 合理 布局 页 面 的 重要 基础 ， 一 旦 计算 有 误 将 导致 页 面 布局 混乱 。 不 同 
浏览 器 有 不 同 的 计算 办 法 ， 本 书 实例 使 用 IE11 浏览 器 ， 本 书后 面 章 节 将 学 习 不 同 浏览 器 的 
RA TERINA o 

注意 : 

在 宽度 和 高 度 的 计算 中 ，IE6.0 以 前 版 本 的 浏览 器 解析 div 的 宽度 和 高 度 设 置 值 包括 边 
框 ， 如 果 读 者 使 用 的 是 IE6.0 以 前 版 本 的 浏览 器 ， 请 尝试 修改 宽度 值 ， 以 达到 图 3-13 所 示 的 


医 乏 是 列表 元 素 布局 


在 学 习 DIV+CSS 的 网 页 整体 结构 布局 之 后 ， 谈 者 还 需要 掌握 列表 元 系 的 使 用 方 
ik. Web 标准 的 HTML 的 一 个 很 重要 的 原则 就 是 使 用 合适 的 标签 组 成 页 面 结构 。 合 适 的 
标签 指标 签 有 语义 ， 并 且 条 理 清晰 、 可 读 性 好 。 所 以 ， 页 面 大 块 区 域 的 布局 一 般 使 用 
div LR, BEREK (如 导航 条 ) 可 以 考虑 使 用 其 他 元 素 ， 如 使 用 比较 广泛 的 列表 
JU e 
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在 传统 的 HTML 页 面 制作 中 ， 列 表 元 素 的 使 用 并 不 多 ， 而 在 CSS 的 帮助 下 列表 元 
系 变 得 空前 强大 ， 甚 至 用 于 小 区 坯布 局 。 列 表 元 素 的 1 是 块 状元 素 ， 所 以 有 宽度 和 高 度 
设置 ， 并 且 可 以 通过 浮动 属性 的 设置 使 多 个 fi 元素 并 排 。 这 种 结构 非常 适合 于 网 页 的 导 
航 条 布局 。 

特别 说 明 : 

在 HIMLS 版 本 以 后 新 增加 了 许多 标签 ， 和 列表 元 素 相 关 的 就 有 <menu> 标 签 ，<menu> 
可 以 定义 菜单 列表 ， 当 希望 列 出 表单 控件 时 使 用 该 标签 。 本 书 对 于 HTML5 的 应 用 测 重 于 
DIV 的 自 定义 应 用 ， 对 于 新 增加 的 HTMLS 标签 也 不 影响 使 用 。 

由 于 在 页 和 面 布局 时 列表 元 素 不 需要 编号， 所 以 列表 元 素 更 多 地 使 用 ul 标签。 

创建 网 页 文件 HIMLS， 命 名 为 nav_ ulLhtml， 此 文件 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
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<title> 导 航 条 制作 </title> 
«style type="text/css"> 
* imargin:Opx; 
padding:Opx; 
Znav( 
width:500px; 
height:20px; 
margin:Opx auto; 
background-color:ZFF9900;! 
li width: 123px; 
height:20px; 
border:1px solid #0000FF; 
text-align:center; 
float:left; } 
</style> 
</head> 
<body> 
«ul id="nay"> 
<li> 8 </li> 
<li> H </li> 
«iR Bol) 
<li> 8 ni 
</ul> 
</body> 
</html> 


为 了 更 方便 地 看 到 导航 条 的 表现 ， 在 这 里 编者 给 ul wA SMAGAS JB li wE S 
蓝 色 边框 ， 在 浏览 器 中 浏览 ， 2 SR un E 3-14 所 示 。 
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3.3.2 导航 条 的 超 链 接 


在 实际 操作 中 ， 为 了 增加 导航 条 的 互动 ， 列 表 元 素 弟 常 配合 超 链接 元 素 一 起 使 用 。 超 链 
接 有 伪 关 选择 符 ， 可 以 呈现 链接 文学 和 用 户 互动 的 4 个 状态 ， 即 未 访问 前 、 鼠 标清 过 、 鼠 标 
单 击 时 和 被 访问 后 。 其 实在 Web 标准 中 不 仅 超 链接 有 这 些 伪 类 选择 和 从，1li 等 其 他 元 素 同样 


有 :hover 和 :active 这 两 个 伪 关 选择 符 ， 只 是 IE 浏览 夯 只 文 持 超 链接 元 素 的 伪 类 选择 符 。 为 了 
A IE 浏览 天， 只 得 配合 超 链接 制作 互动 导航 条 。 


Wi BB: 
FireFox 浏览 器 比 正 浏览 器 更 接近 Web 标准 的 代码 解析 ， 所 以 FireFox 浏览 器 支持 其 
元 素 的 伪 类 选择 符 。 


虽然 超 链接 元 素 是 内 联 元 素 ， 但 在 本 例 中 用 CSS 代码 将 其 转换 为 块 状 元 素 ， 然 后 设置 
其 冤 度 和 高 度 。 这 样 束 不 需要 设置 i 元素 的 样式 了 ， 只 要 设置 i 元素 的 浮动 属性 ， 使 1 元 素 
并 列 摆 放 即 可 。 创 建 网 页 文件 HIML5S， 命 名 为 nav_ul a.html， 此 文件 的 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 导 航 条 制作 </title> 
«style type="text/css"> 
* (margin:Opx; 
padding:Opx; 
ul (list-style:none;j 
#nav (width:500px; 
height:20px; 
margin:Opx auto; 
background-color:ZFF9900;! 
li (float:left;) 
li a(display:block; 
width: 1 17px; 
height:20px; 
border:1px solid #0000FF; 
margin-left:5px; 
font-weight:bold; 
text-decoration:none; 
text-align:center; } 
li a: link 
background-color:2990000; 
color:#9900FF;} 
li a:hover{background-color:#00CCO0; 
color:#FFFFOO;} 
li a:active {background-color:#FF0000; } 
li a:visited {background-color:#00FF00;} 
</style> 
</head> 
<body> 
«ul id="nav"> 
«]r 
«a href="#" title-" ix zi yl A Va H uia» 
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</li> 
<ļi> 
«a href="#" title=" X Xe 39r PII B "3T </a> 


< e 
<li> 

<a href="#" title=" 这 是 沟通 的 渠道 "> 联系 我 们 </a> 
</li> 


<li> 
<a href="#" title=" 这 是 留言 的 链接 "> 留言 板 </a> 
</li> 
</ul> 
</body> 
</html> 


为 了 更 方便 地 看 到 导航 条 的 表现 ， 这 里 给 ul 设置 了 桶 黄色 背景 色 ， 并 给 超 链接 元 素 设 
置 了 盟 色 边框 。 在 不 同 状态 下 ， 超 链接 以 及 内 含 文本 有 不 同 的 颜色 。 在 浏览 器 中 的 浏览 效果 
如 图 3-15 所 示 。 

— EXEI 
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3-15 制作 互动 导航 条 


DA 导 航 条 的 互动 设计 


该 者 可 能 有 疑惑 ， 既 然 超 链接 转换 为 块 状元 素 了 ， 为 什么 4 个 超 链 接 区 域 块 可 以 并 列 于 
一 行 。 虽 然 超 链 接 块 没有 设置 浮动 属性 ， 但 其 百 属 的 父 容器 〈( 即 1i 元 素 ) 设置 了 浮动 属性 ， 
所 以 实际 上 是 4 个 fi 元 素 并 列 。 通 过 引入 超 链 接 的 伪 类 选择 从 ， 导 航 条 有 了 互动 性 。 根 据 用 
户 不 同 的 操作 ， 超 链接 呈现 不 同 的 样式 ， 如 背景 色 的 改变 、 文 本 闫 色 的 改变 。 为 了 使 超 链 接 
的 文本 更 突出 ， 本 例 使 用 了 font-weight 属性 ， 设 置 其 值 为 bold (即使 文本 加 粗 )。 通 过 将 
text-decoration 属性 设置 为 none， 去 除了 超 链 接 默 认 的 下 划 线 。 

为 了 使 导航 条 的 各 项 不 全 于 过 于 拥挤 ， 本 例 中 使 用 了 margin-left 属性 ， 即 左边 距 ， 使 每 
个 超 链接 块 都 有 了 5 像素 的 左边 距 。 考 虑 到 边 距 、 超 链接 块 的 宽度 和 边框 粗细 ， 将 ul 元 素 
的 宽度 设置 为 425 像素 ， 即 为 图 3-15 中 黄色 的 部 分 。 

注意 : 

通常 网 页 设计 中 很 少 使 用 ul 元 素 的 列表 符号 ， 所 以 把 ul 标签 选择 符 的 list-style 属性 设 
置 为 none， 表 示 页 面 中 任何 Ul 列表 结构 都 没有 列表 符号 。 


BA 
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元 素 的 非 第 规定 位 万 式 


KEYT KEN HTML 元 素 定 位 的 方法 ， 由 于 盒 模 型 的 限制 ， 导 人 臻 元素 无 法 在 页 面 
中 随心 所 欲 地 摆 放 。 但 是 网 页 内 容 需 要 一 些 能 随意 摆 放 的 元 素 ，CSS 提供 了 绝对 定位 模式 和 
相对 定位 模式 解决 ， 这 两 种 定位 模式 需要 设置 CSS 的 position 属性 。 

position 的 原意 为 位 置 、 安 置 、 状 态 。 在 CSS 布局 中 ，position 属性 非常 重要 ， 很 多 特殊 
容 絮 定位 必须 用 position 来 完成 。Position 属性 有 4 个 值 ， 分 别 是 static、absolute、fixed、 
relative， 其 中 static 是 默认 值 ， 代 表 无 定位 《一 般 用 于 取消 特殊 定位 的 继承 ， 人 恢复 默认 


W HO. 


us C GS 绝 对 定位 


HAAS position 属性 值 为 absolute 时 ， 这 个 容 妖 即 被 绝对 定位 了 。 绝 对 定位 在 儿 种 定 
位 方法 中 使 用 最 广泛 ， 这 种 方法 能 够 很 精确 地 将 元 素 移 动 到 用 户 想 要 的 位 置 。 使 用 绝对 定位 
的 容 右 前 面 的 或 者 后 面 的 容 右 会 认为 这 个 层 并 不 存在 ， 即 这 个 容 右 浮 于 其 他 容 右 上 ， 它 是 独 
并 出 来 的 ， 类 似 于 Photoshop 软件 中 的 图 层 ， 所 以 position:absolute 将 一 个 元 素 放 到 固定 的 位 
EAE JJ f 

HALDAR EMARE AME, EZB SHUT? 类 似 于 Photoshop 
HS ESLEUR E PAAR. AW EMWRREA E PAAR. dElR]— UE BA mex Emm mS. 
在 计算 机 显示 中 把 垂直 于 显示 屏幕 平面 的 方 癌 称 为 zZ 方 癌 ，CSS 26] E Pr B TER z-index 
属性 对 应 这 个 方 回 ，z-index 属性 的 值 越 大 ， 容 占 越 罪 上 。 即 同一 个 位 置 上 的 两 个 绝对 定位 的 
容器 只 会 显示 z-index 属性 值 较 大 的 。 

注意 : 

当 容 器 都 没有 设置 z-index 属性 值 时 ， 默 认 靠 后 的 容器 的 z 值 大 于 前 面 的 绝对 定位 的 


如 果 对 容器 设置 了 绝对 定位 ， 在 默认 情况 下 ， 容 器 将 紧 挨 看 其 父 容器 对 象 的 左边 和 顶 
边 ， 即 父 容器 对 象 的 左上 角 。 定 位 的 方法 为 在 CSS 中 设置 容器 的 top CDS. bottom CJ 
BED. left CA) M right CH) 的 值 ， 这 4 个 值 的 参照 对 象 是 浏览 器 的 4 条 边 。 创 建 网 页 
文件 HIML5， 命 名 为 pos ab.html， 此 文件 的 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>CSS 的 绝对 定位 </title> 
«style type="text/css"> 
*{margin: 0px; 


padding:Opx; 


Zall(height:500px; 
width: 700px; 
margin-left: 100px; 
background-color:ZFFCC99;| 
#box1,#box2,#box3,#box4,#boxS (width:200px; 
height:60px; 
border:5px double #0000FF; 
position:absolute; j 
Ztbox1 { top:10px; 
left:90px; 
background-color:££CC9900; } 
#box2{ top:20px; 
left: 120px; 
background-color::£99CC00; } 
#box3{ bottom:150px; 
left:70px; 
background-color::£99CC00; } 
#box4{ top: 1Opx; 
right: 120px; 
z-index:10; 
background-color:99CC00;| 
#box5{ top:20px; 
right: 180px; 
z-index:9; 
background-color:ZCC9900; | 
#a,#b,#c (width:350px; 
height: 100px; 
border: 1px solid 2CC3300; 
background-color:229966CC;) 
</style></head> 
<body> 


«div 1d="all"> 


«div id="box1"> 第 1 个 固定 的 div 容器 </div> 
«div id="box2"> 第 2 个 固定 的 div 容器 </div> 
«div id="box3"> 第 3 个 固定 的 div 容器 </div> 
«div id="box4"> 第 4 个 固定 的 div 容器 </div> 
«div id="box5"> 第 5 个 固定 的 div 容器 </div> 
«div id="a"> 第 1 个 无 定位 的 div ZE88«/div- 
«div id="b"> 第 2 个 无 定位 的 div 容器 </div> 
«div id="c"> 第 3 个 无 定位 的 div 容 需 </div> 


</div> 
</body> 
</html> 
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这 里 给 外 部 div 设置 了 本 FCC99 背景 色 ， 并 给 内 部 无 定位 的 div 设置 了 #9966CC 背景 
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色 ， 而 给 绝对 定位 的 div 容器 分 别 设置 了 #CC9900 和 #99CC00 背景 色 ， 并 设置 了 double 类 型 
的 边框 。 在 浏览 器 中 的 浏览 效果 如 图 3-16 所 示 。 


b. A = 
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从 本 例 中 可 以 看 到 ， 设 置 top、bottom、left 和 right 中 的 全 少 一 种 属性 后 ，5 个 绝对 定位 
的 div 容器 彻底 摆脱 了 其 父 容器 Gd 名 称 为 al) 的 束缚 ， 独 立地 漂浮 在 上 面 。 而 在 未 设置 z- 
index 属性 值 时 ， 第 2 个 绝对 定位 的 容器 显示 在 第 1 个 绝对 定位 的 容器 上 方 ( 即 后 面 的 容器 
的 z-index 属性 值 较 大 )。 相 应 地 ， 第 5 个 绝对 定位 的 容器 虽然 在 第 4 个 绝对 定位 的 容器 后 
面 ， 但 由 于 第 4 个 绝对 定位 的 容器 的 z-index 值 为 10， 第 5 个 绝对 定位 的 容器 的 z-index 值 为 
9， 所 以 第 4 个 绝对 定位 的 容 右 显示 在 第 5 个 绝对 定位 的 容器 的 上 方 。 

说 明 : 

读者 可 以 随意 拖 动 浏览 器 的 窗口 大 小 ， 观 察 绝 对 定位 的 div 容器 的 位 置 变化 。 这 里 还 需 
要 注意 在 下 6.0 和 了 JIE7.0 中 浏览 的 效果 也 是 不 一 样 的 。 


s42 固定 定位 


当 容器 的 position 属性 值 为 fixed 时 ， 这 个 容器 即 被 固定 定位 了 。 国 定 定位 和 绝对 定位 
非常 类 似 ， 不 过 被 定位 的 容器 不 会 随 着 滚动 条 的 拖 动 而 变化 位 置 。 在 视野 中 ， 固 定 定位 的 容 
器 的 位 置 是 不 会 改变 的 。 创 建 网 页 文件 ， 命 名 为 pos_fix.html， 此 文件 的 代码 如 下 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>CSS 固定 定位 </title> 
«style type="text/css"> 


* imargin:Opx; 
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padding:0px;} 
#all{width:500px; 
height:900px; 
background-color:#FF9900; } 
#fixed{width: 110px; 
height:90px; 
border: 16px outset #993300; 
background-color:#00FF00; 


position:absolute; 


top:30px; 
left:20px;} 
#a{width:250px; 
height:350px; 
margin-left:30px; 
background-color:#0099FF; 
border:2px outset #000; } 
</style></head> 
<body> 
<div id="all"> 
<div id-"fixed"» [5] E HJ d «/div- 
«div id="a"> 无 定位 的 div 容 锅 </div> 
</div> 
</body> 
</html> 


这 里 给 外 部 div w E J #FF9900 背景 色 ， 并 给 内 部 无 定位 的 div 设置 了 #0099FF È 
色 ， 而 给 固定 定位 的 div 容器 设置 了 #00FF00 背景 色 ， 并 设置 了 outset 类 型 的 边框 。 在 浏览 
器 中 的 浏览 效果 如 图 3-17 所 示 。 
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Bed n] ELSE SIE DU Vas TIE EUR UAR. Die XR SA ETIN EAE. ANI IE6.0 以 
下 版 本 的 浏览 器 不 支持 fixed 值 的 position 属性 ， 所 以 网 上 类似 的 效果 都 是 淋 用 JavaScript 脚 
本 编程 完成 的 。 


umo CS 相对 定位 


当 容 喜 的 position 属性 值 为 relative 时 ， 这 个 容 喜 即 被 相对 定位 了 。 相 对 定位 和 其 他 定位 
相似 ， 也 是 独立 出 来 泽 在 上 面 。 不 过 相对 定位 的 容器 的 top〈 顶 部 )、bottom CES. left 
(左边 ) 和 right (右边 ) 属性 的 参照 对 象 是 其 父 容器 的 4 条 边 ， 而 不 是 浏览 器 窗口 ， 并 且 相 
对 定位 的 容器 浮上 来 后 ， 其 所 占 的 位 置 仍然 留 有 空位 ， 后 面 的 无 定位 容器 仍然 不 会 “ 挤 ” 上 
来 。 创 建 网 页 文件 ， 命 名 为 pos_rel.html， 此 文件 的 代码 如 下 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<style type="text/css"> 


* (margin: 0px; 


padding:Opx; 
#all{width:500px; 
height:500px; 
background-color:#FF9900; } 
#fixed {width: 130px; 
height:90px; 
border: 1 Spx ridge #0000FF; 
background-color:99FF00; 
position:relative; 
top:15px; 
left: 1 Spx;} 
#a,#b (width:250px; 
height:150px; 
background-color:ZFFCCFF; 
border:2px outset #000; } 
</style></head> 
<body> 
<div id="all"> 
<div id="a"> 第 1 个 无 定位 的 div 容器 </div> 
«div id="fixed"> 相 对 定位 的 容器 </div> 
«div id="b"> 第 2 个 无 定位 的 div f ss-/div 
</div> 
</body> 
</html> 


这 里 给 外 部 div xà J #FF9900 背景 色 ， 并 给 内 部 无 定位 的 div w E J #FFCCFF 背景 
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色 ， 而 给 相对 定位 的 div 容器 设置 了 #99FF00 背景 色 ， 并 设置 了 inset BAM. EDU Vias 
中 的 浏览 效果 如 图 3-18 所 示 。 
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3-18 CSS 相对 定位 


相对 定位 的 容 吉 其 实 并 未 完全 独立 ， 译 动 范 围 仍 然 在 父 容 露 内， 并 且 其 所 占 的 空 日 位 置 
仍然 有 效 地 存在 于 前 、 后 两 个 容器 之 间 。 


umo (CS 程序 的 简化 


虽然 CSS 文件 或 者 租 入 的 CSS 都 是 纯 文 本 文件 ， 对 其 进行 整理 和 缩写 对 于 减少 代码 有 
很 大 的 帮助 ， 当 CSS 定义 的 代码 量 比 较 多 时 ， 更 加 突显 了 整理 及 缩写 的 重要 性 。 

本 方 将 介绍 CSS 程序 简化 的 注意 事项 ， 对 于 具体 缩写 方法 将 结合 后 面 的 实例 详细 
讲解 。 

1. 缩写 属性 

使 用 Dreamweaver 定义 CSS. 虽然 很 方便 ， 但 是 程序 生成 的 代码 比较 吕 唆 ， 根 据 div 的 
CSS 规则 定义 的 方 框 属性 中 定义 的 填充 Cpadding) 属性 ， 系 统 会 自动 将 上 、 下 、 左 、 右 4 个 
属性 分 开 定义 ， 而 实际 情况 可 以 缩写 在 同一 行内 。 

类 似 的 情况 还 有 背景 (background), F Cfont), WHE (border)、 列 表 (list-style)、 
填充 〈padding)、 边 界 (margin) 等 属性 。 

da) 上 右 下 左 

填充 、 边 框 和 边界 都 有 4 个 边 ， 可 以 合并 成 一 行 ， 按 照 “ 上 右 下 左 ”( 顺 时 针 〉 的 顺序 
来 定义 ， 中 间 以 空格 来 分 隔 ， 例 如 “margin:Spx 10px 15px 20px;”。 

如 果 “ 上 和 关 下 ?， 但 是 “ 左 = 右 ?”， 可 以 简写 成 3 个 值 (上 、 左 右 、 下 )， 例 如 
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“margin:5px 10px ”15px;”， 等 同 于 “margin:5px 10px 15px 10px;”。 

如 果 “ 上 = 下 ” 且 “ 左 = 右 ”， 可 以 简写 成 两 个 值 ( 上 上下、 左右 )， 例 如 “margin:10px 
20px;", 等 同 于 “margin:10px 20px 10px 20px; ". 

如 果 上 、 下 、 左 、 石 都 相等 ， 就 可 以 合并 成 一 个 值 ， 例 如 “margin:5px;”， 等 同 于 
" margin:5px 5px 5px 5px; ". 

(2) 缩写 颜色 

AST “#00FF00”, XENA ECL BUE RT EARS 7g "VOFO". 

(3) 压缩 属性 

有 些 关 于 属性 的 定义 可 以 压缩 到 一 行 中 ， 各 属性 之 间 以 空格 分 隔 ， 例 如 “font” 的 大 
^N. BRE. HANS. 

2. 利用 通配符 

在 CSS 的 最 开始 部 分 定义 通用 CSS 规划， 通用 规则 对 所 有 的 选择 符 写 都 起 作用 ， 这 样 
a HI EAS — 5 朋 绝 大 部 分 的 标签 都 会 涉及 的 属性 ， 例 如 边框 、 边 界 和 填 序 等 。 

用 通配符 “*” 进 行 声 明 ， 如 下 所 示 : 

*d 


margin:0; 


padding:0; 
j 


此 时 ， 所 有 的 元 素 的 边界 和 填充 都 为 0。 在 其 后 可 以 再 进行 其 他 的 规则 声明 ， 后 面 声明 
的 规则 会 蕉 换 挥 前 面 的 通 配 属性 定义 。 这 是 为 了 避免 一 些 未 声明 的 元 素 ， 因 为 浏览 右 默 认 样 
式 而 造成 的 错位 情况 。 


3. 继承 

子 元 到 和 目 动 继 承 父 元 素 的 属性 值 ， 例 如 字体 、 闫 色 等 ， 所 以 对 于 可 以 继承 的 CSS 规则 
不 需要 重复 定义 。 

4. 组合 


有 某 些 有 相同 属性 的 选择 符 可 以 统一 定义 。 有 相同 属性 的 选择 符 中 间 以 逗号 “,” 分 隔 ， 
例如 “body,#main,table {border:0;}”， 等 同 于 分 别 定 义 这 3 个 选择 符 的 边框 为 0。 

5. 0px 与 0 

无 论 用 什么 单位 ，0 殉 是 0， 因 此 0px=0in=0px=0。 

在 后 面 的 章节 中 将 以 实例 的 形式 详细 介绍 CSS 缩写 的 方法 。 到 这 里 ， 我 们 已 经 简单 地 介绍 
完了 DIV+CSS 的 网 页 布局 ， 相 信访 者 已 经 学 握 了 DIV+CSS 大 体 的 布局 方法 ， 以 及 列表 的 布局 
元 素 和 元 系 的 概念 等 ， 在 后 面 的 章节 中 我 们 将 学 习 如 何 应 用 CSS. 实现 网 页 的 布局 设计 。 


£3 JavaScript 编程 应 用 基础 


JavaScript 是 一 种 应 用 于 网 页 中 的 直译 式 脚 本 语言 ， 是 一 种 动态 类 型 、 弱 类 型 、 基 于 原 
型 的 语言 ， 内 置 支持 类 型 。 它 的 解释 器 被 称 为 JavaScript 引擎 ， 为 浏览 器 的 一 部 分 ， 广 泛 用 
于 客户 端的 脚本 语言 。JavaScript 最 早 在 HTML 网 页 上 使 用 ， 用 来 给 HTML 网 页 增加 动态 功 
能 ， 最 常见 的 应 用 就 是 表单 的 验证 、Banner 图 片 轮 播 等 设置 。 本 章 学 习 网 页 交互 实现 语言 
JavaScript 应 用 的 基础 知识 。 
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(—7 掌握 能 入 网 页 的 动画 技术 


(^7 JavaScript 的 特点 

(7 在 网 页 中 内 入 JavaScript 的 方法 

© 使 用 DIV+CSS 布局 网 页 

(7 使 用 JavaScript 实现 图 片 轮 播 的 技术 
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网 站 的 建设 技术 《从 传统 的 文字 网 页 ， 文 学 图 片 混 排 网 页 ， 以 及 包含 数据 库 的 动态 网 
页 ， 到 如 今 包 人 省 文字 、 图 片 、 声 音 、 多 媒体 动画 、 数 据 库 的 完全 复合 型 的 网 站 ) 经 历 了 一 个 
不 断 磨 合 、 丰 富 、 实 用 的 过 程 。 下 面 讲解 网 页 动画 在 网 站 建设 中 的 重要 性 。 


有 大量 成 功 网 站 所 具备 的 特点 


目前 ， 网 站 已 经 成 为 互联 网 最 重要 的 组 成 部 分 ， 是 企业 或 者 个 人 通 往 成 功 的 关键 。 因 
此 ， 创 建 网 站 不 仅 是 网 络 行销 的 基础 ， 更 是 每 一 个 参与 网 络 行销 活动 的 企业 或 个 人 的 第 一 
步 ， 也 是 极为 重要 的 一 步 。 图 4-1 所 示 为 成 功 的 网 站 应 该 具备 的 特点 。 
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图 4-1 成 功 网 站 应 具备 的 特点 


第 一 ， 结 构 清 晰 、 便 于 使 用 。 

如 东 人 们 看 不 明日 或 很 难看 明日 你 的 网 站 结构 ， 那 怎么 会 吸引 住 列 人 的 眼球 呢 ? 所 以 一 
个 成 功 的 网 站 必须 拥有 一 个 清晰 而 且 便 于 使 用 的 结构 ， 这 样 才 能 吸引 更 多 的 用 户 来 访问 。 

第 二 ， 导 问 清 晰 。 

使 用 超 文 本 链接 或 图 万 链 接 ， 使 人 们 能 够 在 你 的 网 站 上 目 由 前 进 或 后 退 ， 而 不 要 让 用 户 
使 用 浏览 右上 的 前 进 或 后 退 按钮 ， 这 样 就 会 让 用 户 感觉 到 方便 、 快 捷 。 男 外 ， 还 要 记 住 在 所 
有 的 图 片上 使 用 “alt” 标 识 符 注 明 图 片 名 称 或 解释 ， 以 便 那 些 不 愿意 目 动 加 载 图 刻 的 用 户 能 
够 了 解 图 片 的 含义 。 

第 三 ， 快 速 的 下 载 。 

并 不 是 每 个 上 网 用 户 使 用 的 部 是 党 带 业 务 ， 大 多 数 浏 览 者 不 会 进入 一 个 需要 等 每 5 分 钟 
下 载 时 间 才 能 进入 的 网 站 。 请 记 住 在 互联 网 上 30 秘 的 等 待 时 间 与 我 们 平常 生活 中 10 分 钟 的 
等 符 时 间 给 人 的 感 党 是 相同 的 ， 因 此 要 尽量 避免 使 用 过 多 的 图 片 以 及 体积 过 大 的 图 所 
和 动 男 。 
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第 四 ， 吸 引 人 的 网 页 动画 。 
许多 网 站 的 设计 者 使 用 了 动态 GIF 图 片 和 Flash 动画 ， 以 使 网 站 上 的 图 片 或 文字 产生 动 
态 效果 。 这 虽然 增加 了 一 定 的 网 页 下 载 时 间 ， 但 它 会 吸引 用 户 对 网 站 其 他 信息 的 注意 。 由 于 O) 
在 互联 网 上 的 浏览 者 大 多 数 是 一 些 寻找 信息 的 人 ， 而 整个 Web 所 提供 的 信息 量 可 以 用 海量 
来 形容 。 在 条 件 允 许 的 情况 下 ， 加 入 网 页 动画 是 获得 高 访问 量 的 一 个 必 杀 技 。 
第 五 ， 方 便 的 反馈 订购 程序 。 
这 是 一 个 通常 被 网 站 设计 者 忽略 的 问题 。 让 客户 明确 你 所 能 提供 的 产品 或 服务 ， 并 让 他 
们 非常 方便 、 快 捷 地 订购 ， 是 你 获得 成 功 的 重要 因素 。 如 果 客 户 在 你 的 网 站 上 产生 了 购买 产 
品 或 服务 的 欲望 ， 你 必须 能 够 让 他 们 尽快 地 实现 。 
第 六 ， 及 时 维护 推广 。 
一 个 成 功 的 网 站 除了 新 颖 的 产品 、 随 时 更 新 的 新 闻 、 良 好 的 售后 服务 等 因素 之 外 ， 宣 传 
与 推广 也 是 极其 重要 的 。 简 单 地 说 ， 网 站 如 果 不 宣传 ， 那 么 它 就 像 是 一 个 孤立 的 小 岛 ， 永 远 
无 人 问津 。 不 论 你 的 结构 多 么 清晰 ， 内 容 有 多 好 ， 东 西 有 多 便宜 ， 都 很 难 让 更 多 的 客户 知 
道 。 所 以 要 想 成 功 就 必须 大 力 宣传 自己 的 网 站 。 
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目前 在 Internet W EEEREN YE eU TR PE. RELF 01 2J] IE EP 35 o De 7s AL ze E 
入 技术 。 所 谓 艇 入 技术 是 指使 用 第 三 方 软件 或 者 其 他 的 编程 方法 ， 在 HTML 标准 语言 中 插 
入 不 同 的 编程 对 象 ， 从 而 达到 在 TE 浏览 右 中 实现 动画 的 效果 。 当 然 ， 让 网 页 动 起 来 的 方法 
有 很 多 种 ， 下 面 介绍 儿 种 香 见 的 能 入 技术 。 

1. GIF 图 片 动画 

GIF (Graphics Interchange Format) 是 一 种 图 片 格式 ， 它 的 原音 是 “图 像 互 换 格式 ”， CU 
是 CompuServe 公司 在 1987 年 开发 的 图 像 文件 格式 。GIF 文件 的 数据 是 一 种 基于 LZW 算法 
的 连续 色调 的 无 损 压 缩 格 式 ， 其 压缩 率 一 般 在 50% 左 右 ， 它 不 属于 任何 应 用 程序 。 目 前 儿 平 
所 有 相关 软件 都 文 持 它 ， 公 共 领 域 中 有 大 量 的 软件 在 使 用 GIF 图 像 文件 。GIF 图 像 文件 的 数 
据 是 经 过 奈 近 的 ， 而 且 采 用 了 可 变 长 度 等 压缩 算法 。 押 以 GIF 的 岁 像 深度 从 Ibit 到 8bit, 
GIF ig xh 256 种 色彩 的 图 像 。GIF 格式 的 为 一 个 特点 是 其 在 一 个 GIF 文件 中 可 以 存 多 幅 
彩色 图 像 ， 如 果 把 存 于 一 个 文件 中 的 多 幅 图 像 数 据 逐 幅 读 出 并 显示 到 屏 硕 上 ， 束 可 以 构成 一 
种 最 人 简单 的 动画 。 图 4-2 所 示 为 一 个 人 简单 的 打斗 动作 ， 从 小 狗 跳 起 到 打 完 儿 1 秒 钟 的 GIF 动 
男 灰 需要 8 张 不 同 的 图 片 。 

GIF 分 为 静态 GIF 和 动画 GIF 两 种 ， 文 持 透 明 背 景 图 像 ， 适 用 于 多 种 操作 系统 ， 体 积 很 
小 ， 网 上 很 多 小 动画 都 是 GIF 格式 。 其 实 GIF 是 将 多 幅 图 像 保 存 为 一 个 图 像 文 件 ， 从 而 形成 
动画 ， 所 以 归根 到 底 GIF 仍然 是 图 片 文 件 格式 。GIF 图 片 动画 在 网 站 中 的 应 用 也 是 比较 多 
的 ， 由 于 它 的 体积 较 小 ， 一 些 比 较 人 简单 的 形象 动画 (例如 网 站 变化 的 Logo)〉 经 党 使 用 GIF 
动画 制作 。 
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图 4-2 ”GIF 动画 动作 分 解 


2. CSS 样式 动画 

CSS 样式 表 中 涉及 到 动画 的 部 分 ， 主 要 是 指 豚 标 触 发 动画 功能 ， 包 括 链 接 的 变化 动画 、 
恨 标 显示 伦 换 动画 等 。 这 关 小 动画 在 网 页 设计 中 的 应 用 非常 多 ， 可 以 这 么 认为 ， 使 用 标准 的 
DIV+CSS 布局 网 页 CSS 样式 动画 是 一 定 要 用 的 。 由 于 本 和 的 具体 知识 已 在 第 1 EAR 2 3E 
中 详细 介绍 ， 这 里 不 做 具体 阐述 。 

3. JavaScript 特效 动画 

为 了 获得 交互 功能 ， 网 页 设计 者 开始 在 网 页 中 加 入 JavaScript. VBScript 这 样 的 脚本 语 
AAK Java 小 程序 来 接受 用 户 的 信息 ， 并 给 出 具体 啊 应 。 比 如 ， 当 用 户 把 鼠标 指针 拖 到 一 个 
地 方 时 ， 网 页 中 将 给 出 友好 的 动画 文本 提示 。 这 种 效果 令 人 兴奋 ， 它 大 大 区 别 于 以 前 的 网 
页 ， 上 共有 了 人 性 化 的 交互 功能 。 但 是 ， 组 织 制 作 这 么 一 个 Web 页 是 十 分 困难 的 ， 设 计 者 必 
须 掌 握 Java. JavaScript 这 样 的 编程 语言 ， 这 种 要 求 使 得 许多 Web 动画 设计 者 望而却步 。 即 
使 能 够 误 练 地 使 用 这 些 语 言 ， 为 了 获得 类 似 的 效果 ， 需 要 耗费 大 量 的 时 间 和 精力 ， 从 而 使 
Web 网 页 的 制作 周期 大 大 加 长 。 解 决 的 方案 一 般 是 从 网 上 查找 相应 的 JavaScript WAK, AI% 
引用 骸 入 使 用 的 比较 多 。 这 里 我 们 简单 介绍 一 下 JavaScript 的 基础 知识 。 
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下 面 是 一 些 较 音 用 的 简单 功能 ， 用 于 实现 动态 效果 和 交互 。 

1) 当 文 档 被 加 载 到 客户 端 执行 的 ， 文 档 中 的 脚本 可 以 动态 计算 ， 从 而 可 以 动态 地 修改 
文档 的 内 容 。 

2) 脚本 可 以 用 来 获取 表单 控件 中 的 输入 数据 。 一 般 情况 下 ， 开 发 人 员 会 使 用 这 一 功能 
来 验证 用 户 输入 数据 的 有 效 性 ， 例 如 一 个 密码 人 至少 需 要 6 位 长 度 ， 而 且 使 用 脚本 来 检测 用 户 
输入 是 合 符合 这 一 要 求 。 

3) 脚本 可 以 啊 应 某 些 事件 ， 这 些 事件 包括 加 载 、 蔓 载 、 处 理 焦点 、 移 动 雇 标 等 。 

4) 脚本 可 以 和 表单 控件 关联 到 一 起 ， 从 而 可 以 创建 图 形 用 户 界 面 元 素 。 

4. Flash 动画 

在 现 阶段 的 网 站 建设 中 ，Flash 的 应 用 已 经 非常 广泛 ， 甚 全 整个 网 站 使 用 Flash 开发 也 已 
成 为 主要 的 发 展 方向 ， 例 如 图 4-3 所 示 为 应 用 Flash 开发 和 维护 的 某 品 牌 网 站 的 效果 它 基 有 
美观 、 动 感 十 足 的 特点 。 
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4-3 ”使 用 Flash 技术 开发 的 网 站 效果 
Flash 是 美国 Macromedia 公司 于 1999 年 6 月 推出 的 优秀 的 网 络 动画 设计 软件 。 


种 交互 式 动画 设计 工具 ， 使 用 它 可 以 将 首 乐 、 首 效 、 图 像 、 图 形 、 动 夯 及 视频 有 机 结合 ， 钢 
作出 扩展 名 为 .swf 的 文件 ， 实 现 融 品质 的 动态 效果 。 众 所 周知 ，HTML 语言 的 功能 十 分 有 
限 ， 无 法 达到 人 们 的 预期 设计 ， 以 实现 令 人 耳目 一 新 的 动态 效果 。 在 这 种 情况 下 ， 各 种 脚本 
语言 应 运 而 生 ， 使 得 网 页 设计 更 加 多 样 化 。 然 而 ， 程 序 设 计 总 是 不 能 很 好 地 普及 ， 因 为 它 要 
求 设 计 人 员 有 具有 一 定 的 编程 能 力 ， 人 们 更 需要 一 种 既 傈 单 直 观 又 功能 强大 的 动画 设计 工具 ， 
Flash 的 出 现 正 好 满足 了 这 种 需求 。Flash 其 有 很 强 的 交互 性 ， 用 Flash 制作 的 动画 既 可 以 骸 
入 到 网 页 中 ， 也 可 以 作为 独立 的 网 页 ， 同 时 还 可 以 用 Flash 实现 其 他 多 媒体 应 用 。 

Flash 作为 一 球 优 邦 的 网 络 动画 设计 软件 ， 其 拥有 许多 与 众 不 同 的 特点 ， 也 正 是 因为 这 
些 特点 才 使 得 它 一 直 备 受 人 们 青睐 。Flash 软件 其 有 以 下 优点 : 

D) 采用 矢量 图 和 流 式 播放 技术 。 与 位 图 不 同 的 是 ， 矢 量 图 可 以 任意 红 放 尺寸 而 不 影响 
图 形 的 质量 ; 流 式 播放 技术 使 得 动画 可 以 边 播放 边 下 载 ， 从 而 缓解 了 网 页 浏览 者 焦急 等 符 的 
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情绪 。 

2) 使 用 关键 帧 和 元 件 使 得 所 生成 的 动画 文件 (SWF 格式 ) 非常 小 ， 通 常 几 KB 大 小 的 
动画 文件 已 经 可 以 实现 许多 令 人 眼花 组 乱 的 动画 效 末 。 将 这 样 的 动画 文件 用 在 网 页 设计 上 不 
仅 可 以 使 网 页 更 加 丰富 多 彩 ， 而 且 小 巧 玲珑 便于 下 载 ， 使 得 动画 可 以 在 打开 网 页 时 在 很 短 的 
时 间 内 得 以 播放 。 

3) 将 首 乐 、 动 画 、 首 效 等 多 种 交互 方式 有 机 结合 ， 使 得 越 来 越 多 的 用 户 把 Flash 作 
为 网 页 动画 设计 的 站 选 工 上 其 ， 创 作出 了 许多 令 人 疏 为 观 止 的 动画 效果 。 而 且 从 Flash 4.0 
版 本 束 已 经 开始 文 持 MP3 的 音乐 格式 ， 这 使 得 加 入 音乐 的 动画 文件 也 能 保持 较 小 的 
体积 。 

4) 强大 的 动画 编辑 功能 ， 使 得 设计 者 可 以 随心 所 欲 地 设计 出 高 品质 的 动画 ， 通 过 
ActionScript 可 以 实现 很 强 的 交互 性 ， 使 Flash 具有 更 大 的 设计 目 由 度 。 另 外 ，RFlash 与 当今 
最 流行 的 网 页 设计 工具 Dreamweaver 完美 结合 ，Flash 动画 可 以 直接 和 能 入 到 网 页 的 任意 位 
Eo dE. 

那么 当前 Flash 在 网 页 中 应 用 最 多 的 地 方 是 在 哪些 方面 呢 ? 我 们 可 以 归纳 为 以 下 几 个 核 
心 功能 的 应 用 : 

1) Flash 引导 页 的 动画 开发 ; 

2) Flash 特效 来 单 〈 导 航 ) 的 制作 ; 

3) Flash 广告 (Banner) 的 应 用 ; 

4) 局 部 内 容 特殊 效 末 的 动 男 制 作 。 

如 果 想 开发 出 完全 动感 的 网 页 动画 ， 大 量 使 用 Flash 确实 是 一 个 非常 不 错 的 选择 。 
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JavaScript 是 一 种 解释 性 的 、 基 于 对 象 《Object) 的 脚本 语言 。 使 用 它 可 以 开发 Internet 
客户 端的 应 用 程序 ，JavaScript 主要 是 基于 客户 问 运 行 的 ， 用 户 单 击 带 有 JavaScript 的 网 页 ， 
网 页 里 的 JavaScript WAERN war EN AASA EEE. JavaScript 束 是 为 了 适应 动态 网 
页 制作 的 需要 而 诞生 的 一 种 新 的 编程 语言 。 它 的 出 现 使 得 网 页 和 用 户 之 间 实 现 了 一 种 实时 性 
的 、 动 态 的 、 交 互 性 的 关系 ， 使 网 页 包含 更 多 活跃 的 元 素 和 更 加 精彩 的 内 容 。 

使 用 它 的 目的 是 与 HTML 超 文 本 标记 语言 、Java 脚本 语言 (Java 小 程序 ) 一 起 实现 在 
一 个 Web 页 面 中 链接 多 个 对 象 ， 与 Web 客户 交互 作用 ， 从 而 可 以 开发 客户 端的 应 用 程序 
等 。 它 是 通过 骸 入 或 调 入 标准 的 HTML. 语言 中 实现 的 ， 它 的 出 现 弥补 了 HTML 语言 的 缺 
陷 ， 是 Java 与 HTML 折 中 的 选择 。 


: 9 L—— Javascript 的 特点 


JavaScript 的 主要 特点 如 下 : 
1. 它 是 一 种 脚本 编写 语言 
JavaScript 是 一 种 脚本 语言 ， 它 采用 小 程序 段 的 方式 实现 编程 。 和 其 他 脚本 语言 一 样 ， 
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JavaScript 同样 是 一 种 解释 性 语言 ， 它 提供 了 一 个 简易 的 开发 过 程 。 它 的 基本 结构 形式 与 
C, CH, VB, Delphi 十 分 类 似 。 但 它 不 像 这 些 语言 需要 先 编译 ， 而 是 在 程序 运行 过 程 中 被 
逐 行 解释 。 它 与 HTML 标识 结合 在 一 起 ， 从 而 方便 用 户 的 使 用 操作 。 

2. 基于 对 象 的 语言 C 

JavaScript 是 一 种 基于 对 象 的 语言 ， 同 时 也 可 以 看 作 是 一 种 面 问 对 象 的 语言 ， 这 意味 痢 
它 能 运用 目 己 已 经 创建 的 对 象 。 因 此 ， 许 多 功能 可 以 来 日 于 脚本 环境 中 对 和 象 的 方法 与 脚本 的 
相互 作用 。 

3. 简单 性 

JavaScript 的 简单 性 主要 体现 在 它 是 一 种 基于 Java 基本 语句 以 及 控制 流 之 上 的 人 简单 而 紧 
凑 的 设计 ， 从 而 对 学 习 Java 是 一 种 非常 好 的 过 渡 ， 其 次 它 的 变量 类 型 是 采用 弱 类 型 ， 并 未 
使 用 严格 的 数据 类 型 。 

4. 安全 性 

JavaScript 是 一 种 安全 性 语言 ， 它 不 允许 访问 本 地 的 人 硬盘， 并 不 能 将 数据 存 入 到 服务 器 
上 ， 不 允许 对 网 络 文 档 进 行 修 改 和 删除 ， 只 能 通过 浏览 右 实 现 信息 浏 览 或 动态 交互 ， 从 而 有 
效 地 防止 数据 的 丢失 。 

5. 动态 性 

JavaScript 是 动态 的 ， 它 可 以 直接 对 用 户 或 客户 的 输入 做 出 啊 应 ， 无 须 经 过 Web 服务 程 
序 。 它 对 用 户 反映 的 啊 应 是 以 事件 驱动 的 方式 进行 的 。 上 所 谓 事件 张 动 是 指 在 主页 中 执行 了 东 
种 操作 上 所 产 生 的 动作 ， 称 为 “事件 ”。 例如 投下 鼠标 、 移 动 窗口 、 选 择 荣 单 等 都 可 以 视 为 事 
件 。 当 事件 发 生 后 可 能 会 引起 相应 的 事件 啊 应 。 

6. 跨 平台 性 

JavaScript 依赖 于 浏览 器 本 里 ， 与 操作 环境 无 关 ， 只 要 是 能 运行 浏览 器 的 计算 机 ， 并 文 
FF JavaScript 的 浏览 絮 都 可 以 正确 执行 。 

Zk ERTIK, JavaScript 是 一 种 狐 的 描述 语言 ， 它 可 以 被 舱 入 到 HTML 的 文件 之 中 。 
JavaScript 语言 可 以 做 到 回应 使 用 者 的 需求 事件 ， 而 不 用 任何 的 网 络 来 回 传输 资料 ， 所 以 妆 


一 位 使 用 者 输入 一 项 资料 时 ， 它 不 用 经 过 传 给 服务 占 处 理 再 传 回来 的 过 程 ， 而 直接 可 以 被 客 
户 问 的 应 用 程序 所 处 理 。 


JavaScript 可 以 出 现在 HTML 的 任意 地 方 ， 在 <html> 之 前 插入 也 不 成 问题 ， 它 使 用 标记 
<script>...</scrip 蕊 进行 声明 ， 不 过 要 在 声明 的 框 染 网 页 中 插入 就 一 定 要 在 <framese 纪 标记 之 
前 插入 ， 合 则 不 运行 。 

下 面 通过 一 个 例子 编写 第 1 个 JavaScript 程序 ， 通 过 它 可 以 说 明 JavaScript 的 脚本 是 怎 
样 被 嵌入 到 HTML 文档 中 的 。 创 建 网 页 XHTML1.0 文件 ， 命 名 为 javascript.html， 此 文件 的 
代码 如 下 : 

«IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ 


TR/xhtmll/DTD/xhtmll -transitional.dtd"— 
«html xmlns-"http://www.w3.org/1999/xhtml" 


"s HTML5-t*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


<head> 

«script language —"javascript" 

<!-- 从 这 里 开始 输入 需要 编写 的 JavaScript fV143-- 
alert(" 这 是 第 一 个 JavaScript 例子 !"); 

alert(" 欢 迎 你 进入 JavaScript 世界 !); 

alert(" 今 后 我 们 将 共同 学 习 JavaScript 知识 ! "); 
</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript</title> 

</head> 

<body> 

</body> 

</html> 


E IE Ñ i as 4T a RU E] 4-4 所 示 。 
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来 自 网 页 的 消息 


À 欢迎 你 进入 JavaScript 世 界 ! 


图 4-4 程序 运行 的 结果 


说 明 : 

此 处 制作 的 实例 是 HTML 文档， 其 标识 格式 为 标准 的 HTML 格式 。 同 HTML 标识 语言 
一 样 ，JavaScript 程序 代码 是 一 些 可 用 文字 处 理 软件 浏览 的 文本 ， 它 在 描述 页 面 的 HIML 相 
关 区 域 出 现 。JavaScript 代码 由 <script language ="javascript">...</scrip 仿 说明 。 在 标识 <script 
language ="javascript">...</scrip 芒 之 间 可 以 加 入 JavaScript 脚本 。 

alert() 是 Jas 的 窗口 对 象 方 法 ， 其 功能 是 弹出 一 个 具有 “确定 ” HR cq 显示 () 
中 的 字符 串 。 通 过 <1--...//--> 标 识 说 明 : 若 不 认识 JavaScript 代码 的 浏览 器 ， 则 所 有 在 其 中 的 
标识 均 被 忽略 ; 若 认 识 ， 则 执行 其 结果 。 使 用 注释 是 一 个 好 的 编程 习惯 ， 它 会 使 其 他 人 可 以 
读 懂 你 的 编程 内 容 。JavaScript 以 </scripf 标 签 结 束 。 

从 上 和 面 的 实例 分 析 中 可 以 看 出 ， 编 写 一 个 JavaScript 程序 的 确 是 非常 容易 的 。 


JavaScript 的 图 上 三 轮 播 应 用 


本 市 主要 介绍 一 个 家 其 品牌 企业 网 站 的 前 痢 布 局 ， 该 实例 中 使 用 了 两 个 动画 拉 术 来 突出 
网 站 的 特点 ， 一 个 是 使 用 Flash 制作 了 滑动 导航 末 单 ， 为 一 个 是 使 用 JavaScript 制作 了 网 页 
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中 老 物 狗 的 轮 播 切换 动画 ， 重 点 介绍 JavaScript 的 图 片 轮 播 应 用 。 


家 有 具 网 站 包含 的 栏目 可 以 根据 所 经 营 网 站 的 主要 项 目 《〈 如 实例 中 的 “三 维 展厅 和 “家 私 
导购 和 “最 新 动态 ”等 品牌 ) 策划 一 、 二 级 栏目 。 有 基体 规划 效果 如 图 4-5 所 示 。 


新 前 概念 
设计 作用 


最 新 促销 e 


过 程 社会 新 闻 

B An 

成 功 案例 最 新 动态 

客厅 家 具 人 物 专访 

MEXA 企业 招商 

家 私 导 购 书房 家 县 ed 
厨房 家 具 健康 居家 

户外 家 具 时 尚 系列 


论坛 首页 
EMEN 家 居 论 坛 
社区 论坛 居家 生活 
情感 人 生 
体育 专区 


4-5 家具 网 站 的 栏目 设计 


L8 it A nAIRE 


HRR H BA IUE R IA F3 SUR SA SEER] 4-6 所 示 。 


4-6 初 布设 计 的 网 站 草图 
在 实例 的 首页 中 使 用 帝 有 人 花纹 场 壁 的 形式 作为 背景 ， 并 使 用 了 一 坚 很 鲜明 的 家 具 摆 设 作 


为 辅助 ， 整 个 衣 页 体现 出 网 站 经 营 者 的 职业 特征 、 审 类 趣味 和 文化 素养 。 该 网 页 使 用 的 配色 


em 
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方案 是 浅 色 系 列 ， 


是 一 个 成 功 的 配色 方案 。 图 4-7 所 示 为 所 涉及 的 首页 效果 。 
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搜房 网 专访 环 博 家 私 珠 三 角 大 区 四 
环 博 家 私 : 制造 的 秘密 


E um ma 
该 产品 画册 包含 了 公司 所 有 了 渤 
的 精美 家 私 ， 设计 精美 ， 欢 
MARE! 


Copyright @ 2000-2008 北京 环 博 家 私 ALL Rights Reserved. 
联系 电话 : 010-123456 ”传真 010-654321 


图 4-7 设计 的 首页 效果 
设计 分 析 : 
网 站 的 主 色 为 淡 黄 色 ( 色 值 为 #f7f2eb )， 使 用 浅 灰 色 ( 色 值 为 #efece8 ) FA 
为 #486671 ) 为 辅 色 ， 配 色 采 集 如 图 4-8 所 示 。 读 者 在 设计 时 可 以 作为 参考 。 
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配色 说 阴 : 
本 例 中 的 主页 色彩 处 理 得 非常 好 ， 可 以 锦上添花 ， 达 到 事半功倍 的 效果 。 黄 色 是 健康 
的 、 阳 光 的 色彩 ， 具 有 活泼 与 轻快 的 特点 ， 给 人 十 分 向 上 的 感觉 ， 象 征 光明 、 和 希望、 高 贵 、 
愉快 。 浅 黄色 的 光 较 弱 ， 但 和 其 他 颜色 配合 反而 显得 很 活泼 ， 具 有 浪漫 、 温 帝 的 特点 。 > 


LEA 创建 和 编辑 站 点 


在 使 用 Dreamweaver CC 2015 进行 网 页 布局 设计 时 ， 首 先 需 要 用 定义 站 点 回 导 定义 站 
点 。 操 作 步 又 如 下 : 

1) 打开 Dreamweaver CC 2015， 选 择 荣 单 栏 中 的 “站 点 ”一 “管理 站 点 ”命令 ， 弹 出 
“管理 站 点 ”对 话 框 。 

2) 该 对 话 框 的 上 边 是 站 点 列表 框 ， 显示 了 所 有 已 经 定义 的 站 点 。 单 击 下 边 的 “ 狐 建站 
点 ”按钮 ， 打 开 “ 站 点 设置 对 象 ” 对 话 框 ， 进 行 以 下 参数 设置 。 

@“ 站 点 名 称 ” jsdiv。 

@“ 木 地 站 点 文件 夹 ” DAbookDIV-4CSS chap04^. 

如 图 4-9 所 示 。 


点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。Dreamweaver 
E 分 pk MID Y ALA ERTEA ETE 


服务 器 pum 
中 将 相同 文件 发 布 到 Web 上 的 服务 器 十 的 远程 文件 去 。 


版 本 控制 T 
» ”高 级 设置 


er 站 点 
ERE 
以 及 可 在 其 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
站 点 名 称 : 
本 地 站 点 文件 来 : zd 


4-9 建立 jsdiv 站 点 


3) 单 击 “ 保 存 ” 按 钮 ， 返 回 “ 服 务 器 ”设置 对 话 框 ， 然 后 选择 “测试 ” 复 选 杠 ， 单 击 
“保存 ”按钮 ， 完 成 站 点 的 定义 设置 。 在 Dreamweaver CC 2015 中 己 经 拥有 了 刚才 设置 的 站 
点 jsdiv。 


使 用 DIV+($ 布局 网 页 


整体 页 和 面 的 布局 规划 设计 如 图 4710 所 示 。 
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图 4-10 整体 布局 框架 设计 


使 用 DIV+CSS 布局 首页 的 步骤 如 下 : 
CD 创建 标准 的 HTMLS 网 页 ， 将 </head> 以 上 的 代码 优化 为 : 


<!doctype html> 

<html> 

<head> 

«meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<link rel="stylesheet" href-"css/style.css" type="text/css" /> 

<title> 环 博 家 私 <title> 

«script Src= "Scripts 人 /AC RunActiveContent.jS" type="text/javascript" ></script> 
«script src-"Scripts/swfobject modified.js" type="text/javascript" ></script> 
</head> 


(2) 其 他 DIV 的 布局 代码 如 下 : 


«div 1d="top"> 
«div 1d="left1"> 
«div id="logo"><img src-"images/index 01.gif"></div> 
«div 1d-" daohang2"7 
«object id-"FlashID"  classid-"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" | width-"180" 
height-" 383" 
«param name="movie" value-"flash/nav.swf' /> 


«param name="quality" value="high" /> 
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«param name="wmode" value-"opaque" /> 

«param name-"swfversion" value-"6.0.65.0" /> 

<!-- 此 param 标签 提示 使 用 Flash. Player 6.0 r65 和 更 高 版 本 的 用 户 下 载 最 新 版 本 的 Flash 
Player。 如 果 您 不 想 让 用 户 看 到 该 提示 ， 请 将 其 删除 。 --> G 


—M 


«param name-"expressinstall" value-"Scripts/expressInstall.swf" /> 

<l- 下 一 个 对 象 标签 用 于 非 E A Ar BTELEH]IECCCÉECHUA IE ES. --> 

<!--[if !IE]>--> 

«object type-"application/x-shockwave-flash" data-"flash/nav.swf" width-" 180" height="383"> 
«1--«![endif]--— 
«param name-"quality" value-"high" /> 


—M 


«param name= 


—M 


«param name= 


E 


wmode" value-" opaque" /> 
swfversion" value-"6.0.65.0" /> 
«param name-"expressinstall" value-"Scripts/expressInstall.swf" /> 
<l- 浏览 器 将 以 下 替代 内 容 显 示 给 使 用 Flash Player 6.0 和 更 低 版 本 的 用 户 。 --> 
<div> 
<h4> 此 页 面 上 的 内 容 需 要 较 狐 版 本 的 Adobe Flash Player。</h4> 
<p><ahref="http://www.adobe.com/go/getflashplayer"><img 
src-"http://www.adobe.com/images/shared/download buttons/get flash player.gif" alt=" 获取 Adobe 
Flash Player" width-" 112" height-"33" /></a></p> 
</div> 
<!--[if !IE]>--> 
</object> 
<!--<![endif]--> 
</object> 
</div> 
<div id="huaping"><img src 
</div> 
<div 1d="left2"> 
<div id="daohang1"> 


«div class="word1"> 


—" 


images/index 11.gif"></div> 


<ul> 
<li class="navflow"><a href="#"> 页 </a></li> 
<li class="navflow"><a href£-' 7-7" m 4r2H«/a»«/li» 
<li class-"navflow"«a hre£-" 75r m E T </a></li> 
<li class="navflow"><a hre£-z" WX 2&3&4l ]</a></li> 

</ul> 
</div> 
</div> 


<div id="bannerone"><img src-"images/index 05.gif" /></div> 
«div id="xinwen"><img src-"images/index 07.gif" /></div> 
«div id="neirong1"> 


«div class="word2"> 


<p><a href-' 4718 5; | V; YS EL ZA TK — £8 XD <a> 2015-05-01 </p> 
<p><a href="#"> 环 博 家 私 : 制造 的 秘密 </a> 2015-04-12 «/p» 


<p><a href="#"> SE Bas 经 典 生 活 </a> 2015-03-15 — «p» 


PHTMLS+CSS+ JavaScript mihi 


(3) 


如 下 : 


<p><a href="#"> P EAEAP ER” </a> 2015-02-01 </p> 
</div> 
</div> 
<div id="zhanshi"><img src-"images/index 09.gif" /></div> 
<div id="neirong2"></div> 
<div id="huace"> 
<div class="word3"> 
<p><a href="#"> 55: VB-005</a> </p> 
<p><a hre 伍 "#"> 规 格 : 2400W*1150D*760H </a></p> 
<p><a href="#"> ğu: 可 选 </a></p> 
</div> 
</div> 
«div 1d="gou"> 
«div id="banner"> 
«div id="banner bg"></div> ”<1!-- 标 题 背景 --> 
«a href="#" id="banner info"></a> <!-- 标 题 --> 
«ul id="list"></ul> 
<div 1d="banner list"> 
«a href="#" target-" blank"><img src-"imgs/pl.jpg" title=" 第 一 只 小 狗 " alt=" 可 爱 的 小 狗 " /></a> 
<a href="#" target=" blank"><img src="imgs/p2.jpg" title=" 第 二 只 小 狗 " alt=" 可 爱 的 小 狗 " /></a> 
«a href="#" target-" blank'^-img src="imgs/p3.jpg" title=" 第 三 只 小 狗 " alt=" 可 爱 的 小 狗 " /></a> 
<a href="#" target-" blank"><img src="imgs/p4.jpg" title=" 第 四 只 小 狗 " alt=" 可 爱 的 小 狗 " /></a> 
</div> 
</div> 
</div> 
</div> 
«div id="right"> 
«div id="zhong"><img src-"1mages/index 03.gif" /></div> 
«div id="beijing"><img src-"images/index O06.gif" /></div> 
«div id="shafa"><img src-"images/index 13.gif" /></div> 
</div> 
</div> 
«div id="bottom"><img src-"images/index 15.gif' /></div> 
«script type-"text/Javascript" 
swfobject.registerObject("FlashID"); 
</script> 
</body> 


在 站 点 中 建立 css 文件 来， 并 建立 一 个 style.css 样式 文件 ， 对 首页 的 样式 控制 代码 


PE PUB CSS*/ 
*{ margin:O0px; 
padding:Opx; 
j 
Pep pn 
body | width:1009/6; 
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AD f 
P WD WX i: 


height:1009/6; 
font: 12px "宋体 ", Helvetica, sans-serif; 
background: #fff; 


j 
P ECPTE ES Fr BAL D 0*/ 
img 1 
border:0; 
j 
PEE Repo. SELLER I R TR Jesi n ez 
#top,#bottom { 


margin: auto; 
width: 1104px; 
j 
此 设置 左 浮动 的 标签 */ 
#left1 #left2,#right,.navflow { 
float:left; 
j 
PHCEC ES FUN ER RET 
?Heftl,Zgright( 
font-size:0; 
j 
PHCEUYAT IB 1.6*/ 
pi line-height:1.6; 
j 
IT REDE 
a:link { 
color: #000; 
text-decoration: none; 


j 


a:visited 1 


text-decoration: none; 
color:7:333; 

j 

a:hover 1 
text-decoration: underline; 
color:#999; 

j 

a:active { 
text-decoration: none; 
color:ZFF9900; 

j 

/*top 部 分 */ 

#bannerone{ 

height: 128px; 

j 


.navflow { 
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width:70px; 

j 

Zxinwen(1 

height:42px; 

j 

Zzhanshi( 

height:38px; 

j 

#gou{ 

width:410px; 

height: 185px; 

j 

Zdaohang2 ( 

width: 180px; 

height:383px; 
background-image:url(../images/index 04.gif); 
j 

Zdaohangl 1 

width:410px; 

height: 73px; 
background-image:url(../images/index 02.gif); 
j 

#neirongl { 

width:410px; 

height:90px; 
background-image:url(../images/index 08.gif); 
j 

Zneirong2 { 

width:410px; 

height:85px; 
background-image:url(../images/index 10.gif); 
j 

#huace { 

width:410px; 

height:133px; 
background-image:url(../images/index 12.gif); 
j 

.wordl 1 

position:absolute; 

margin-top:30px; 

margin-left: 60px; 

j 

.word2 { 

position:absolute; 

height:90px; 

margin-top:2px; 
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margin-left:55px; 

j 

.word3 { 

position:absolute; 

margin-top:43px; 

margin-left: 56px; 

j 

/*Banner 轮 揪 */ 

#banner {position:absolute; width:410px; height: 185px; overflow:hidden;} 


#banner list img {border:Opx;} 

#banner list {width:410px; height:185px;} 

#banner bg {position:absolute; bottom:0;background-color:#000;height:30px;filter: Alpha(Opacity=20); 
opacity:0.2;z-index:1000;cursor:pointer; width:410px; } 

#banner info{position:absolute; width:100px;height:20px;bottom:0; left:5px; color:2000;z-index:10031 
#banner text (position:absolute;height:20px;z-index:1002; right:2px; bottom:Opx;] 

Zbanner ul [position:absolute;list-style-type:none;filter: Alpha(Opacity-75);opacity:0.75;z-index:1001 ; 
margin:0; padding:0; bottom:3px; right:8px;} 

Zbanner ul li fheight:20px;padding:O0px 6px;float:left;display:block;color:zZFFF;border:zfff 1px solid;b 
ackground-color:Z6f4f67;cursor:pointer] 

#banner ul li.on{ background-color:29001 

#banner list a (position:absolute;? /* 让 4 张 图 片 琶 加 在 一 起 */ 


(4) 制作 完成 后 ， 在 浏览 费 中 显示 的 效果 如 图 4711 所 示 。 
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环 博 家 私 : 制造 的 秘密 2015-04-12 
samehe 经 典 生活 2015-03-15 
中 国 公司 对 冲 世 术 ” 2015-02-01 


规格 : 2400W*1150D*76f 
颜色 : 可 选 


图 4-11 HEWA RAR 


LI LU 使 用 动 男 技 术 


在 此 实例 中 ， 为 了 突出 温 翟 、 统 一 的 大 家 氛围 ， 使 用 居家 环境 作为 网 页 的 整个 背景 ， 在 


" HTML5-*CSS- JavaScript 两 页 布局 从 入 门 到 精通 


设计 动画 的 时 候 可 以 把 背景 环境 小 细节 设计 成 动画 ， 这 可 让 整个 背景 看 起 来 更 加 真实 。 这 里 
选择 了 最 具有 特点 的 宠物 狗 ， 可 以 使 用 简单 的 JavaScript 实现 图 片 的 切换 动画 。 对 于 导航 菜 
单 ， 由 于 背景 比较 衬 ， 可 以 制作 成 比较 复杂 的 动画 ， 一 共 制 作 了 两 个 动画 ， 它 们 在 网 页 中 的 
位 置 如 图 4-12 所 示 。 


。 首 页 。 产品 介绍 。 新 品 上 市 。 KARI] 


创造 您 的 空间 
Eam, etis! 
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搜房 网 专访 环 博 家 私 珠 三 角 大 医 2015-05-01 
环 博 家 私 : 制造 的 秘密 2015-04-12 S 
一 一 TERES 经 典 生活 2015-03-15 
中 国 公司 对 冲 ER 2015-02-01 
Flash - | 
| 菜单 动画 


图 4-12 使 用 的 动画 效果 


网 页 上 的 宠物 狗 图 片 是 目 动 轮 播 切换 的 ， 使 用 了 JavaScript 脚本 语言 来 实现 。 制 作 的 步 
TRUN F: 
C10 在 站 点 文件 夹 imgs 里 准备 4 张 市 宠物 狗 的 一 样 大 小 的 JPG 图 片 ， 并 分 别 命名 为 


pljpg. p2jpg. p3jpg 和 p4.jpg， 所 有 图 片 都 要 在 Photoshop 软件 中 进行 统一 处 理 ， 如 图 4-13 
Bra. 


而 
^— = 


ce > 本 地 磁盘 (D) » book » DIV+CSS » chap03 » imgs = 3E 77773 EF imgs 


共享 ” 放映 幻灯 片 AR ”新 建文 件 夫 


区 


Kd. EY 


图 4-13 准备 的 4 张 宠物 狗 图 片 


【JavaScript 编 程 应 用 基础 


(2) 由 于 具体 实现 动画 的 JavaScript 脚本 语言 太 长 ， 所 以 将 其 单独 写成 一 段 程 序 ， 保 存 
为 站 扣 文 件 夹 中 的 bannerjs 文件 ， 只 体操 作 如 图 4-14 所 示 。 


Dw 文件 (RD m) REV) ÆA 修改 (M) 格式 (0) 命令 (C) ”站 点 (S) SOW ”帮助 (H) *-. EH 


bannerjs x jsdiv - DA\book\DIV+CsS\chap03\Scripts\banner.js ~ 


E n sE 
n ar babyzone = function() { ^ 一 一 E M x 
gH 2 function id(name) [return document.getElementById(name);] Kx Kx | tude | EJ 
AX 3 / DADER 本 地 文件 | 大 小 | 类 型 ”| 修改 
e| 4 -|E @ 站 点 - jsdiv 0... 文件 夹 2015/ 
xod 5 function each(arr, callback, thisp) { jJ] sm es 文件 来 2015/ 
R 6 if (arr.forEach) {arr.forEach(callback, thisp);} GEH flash 文件 来 20157 
"i else { for (var i = 0, len = arr.length; i < len; i++) callback.call(thisp, arr[i], GLOBES images 文件 来 2015/ 
t} i, arr};} c. imgs wik 2015/ 
8 EN psd xix 2015/ 
9 function fadeIn(elem) { EE Scripts 文件 来 2015/ 
三 | 10 setOpacity(elem, 0) [0075 AC RunAct... —— 9KB JScrip... 2008/ 
11 for (var i = 0; i < 20; i+) { b banner. js 3KB JScrip... 2015/ 
EM 12 (function() 1 M "ü expressIn... 1KB iR... 2015/ 
Q 13 var pos = i +*+ 5; (0 hem swfobject... 22KB JScrip... 2015/ 
(al 14 setTimeout(function() 1 o index html 5KB HTML 文档 2015/ 
of 15 setOpacity(elem, pos) o" javascript. htm] 1KB HTML 文档 2015/ 
16 }, 1 * 25); 
四 | 17 (i); 
&|18 H 
| 19 1 o NEN d 
| 20 function fadeOut(elem) { 1 个 本 地 项 目 被 选中 ， 总 共 2997 个 = [ Elk...) 
Em 21 for ( var i = 0; i <= 20; i+) { 
£*| 55 (function() { 
AI 23 var pos = 100 - i + 5; 
24 setTimeout(function() 1 
25 setOpacity(elem, pos) 


此 面板 将 显示 i] 文档 的 DOM 结 
t 


4-14 JavaScript 脚本 语言 保存 的 文件 


具体 的 程序 如 下 : 


var babyzone - function() { 
function id(name) {return document.getElementById(name); } 


/遍历 函数 


function each(arr, callback, thisp) 1 
if (arr.forEach) (arr.forEach(callback, thisp); ) 
else { for (var i = 0, len = arr.length; 1 < len; i++) callback.call(thisp, arr[1], i, arr);} 
j 
function fadeIn(elem) { 
setOpacity(elem, 0) 
for ( var i = 0; i < 20; i++) { 
(function() 1 
var pos 21* 5; 
setTimeout(function() 1 
setOpacity(elem, pos) 
j,1* 25); 
1)); 


j 
function fadeOut(elem) { 


for ( var i = 0; 1 <= 20; i++) 1 


j 


"s HTML5-4CSS-* JavaScript BESERASSHE 


(function() { 
var pos = 100 - i * 5; 
setT'imeout(function() 1 
setOpacity(elem, pos) 
1515. 29). 
DO; 


/设置 透明 度 
function setOpacity(elem, level) 1 
if (elem.filters) { 


} else { 


return 1 


elem.style.filter = "alpha(opacity-" + level + ")"; 


elem.style.opacity — level / 100; 


//count: 图 片 数量 ，wrapId: ARKH ÉI DIV; ulld: 1Z4H DIV; infold: 信息 栏 
Scroll: function(count,wraplId,ulId,infoId) { 


var self-this; 

var targetIdx-0; /目标 图 片 序号 
var curIndex-0; // 现 在 图 片 序号 
/添加 于 按钮 


var frag-document.createDocumentFragment(); 

thissnum-[];; 。”W 存 储备 个 二 的 应 用 ， 为 下 面 的 添加 事件 做 准备 

this.info-id(infold); 

for(var 1=0;i<count;i++){ 
(this.num[|i]=frag.appendChild(document.createElement("li"))).innerHTML=i+1; 


j 
id(ulId).appendChild(frag); 


/初始 化 信息 
this.img = id(wraplId).getElementsByTagName("a"); 
this.info.innerHTML self.img[0].firstChild.title; 
this.num[0 |.className-"on"; 
/将 除了 第 1 张 以 外 的 所 有 图 片 设置 为 透明 
each(this.img,function(elem,idx,arr) ( 

if (1dx!=0) setOpacity(elem,0); 


D 


// 为 所 有 的 二 添加 单 击 事件 
each(this.num,function(elem,idx,arr)( 
elem.onclick-function()( 
self.fade(idx,curIndex); 
curIndex-idx; 
targetIdx-idx; 


人 ^-A4-cr /一 一 
直人 EY E JavaSor ipt 编 程 应 用 基础 


/ 目 动 轮 播 效 末 
var ltv=setInterval(function(){ 
if(targetldx<self.num.length-1){ 
targetIdx++; 

:else1 

targetIdx—0; 

j 
self.fade(targetIdx,curIndex); 
curIndex-targetIdx; 

1,2000); 
id(ulId).onmouseover-function() ( clearInterval(itv)) ; 
id(ulId).onmouseout-function() { 

itv-setInterval(function() { 

if(targetIdx«self.num.length-1) 1 

targetIdx++; 

:else1 

targetIdx—0; 

j 
self.fade(targetIdx,curIndex); 
curIndex-targetIdx; 

3,2000); 


J» 
fade:function(idx,lastIdx){ 
if(idx- -lastIdx) return; 
var self-this; 
fadeOut(self.img[lastIdx |); 
fadeIn(self.img[idx |); 
each(self.num,function(elem,elemidx,arr) ( 
if (elemidx!-idx) { 
self.num[elemidx ].className-"; 
velse{ 
id("list").style.background=""; 
self.num[elemidx].className='on'; 
j 
D 
this.info.innerHTML self.img[idx ].firstChild.title; 


} 
70; 


(3) 这 上 段 程序 如 何 调 入 到 主页 面 中 进行 应 用 呢 ? DIRIR fi, 
图 4-15 所 示 的 链接 代码 束 可 以 了 。 


只 要 在 <head> 之 前 加 入 


) QU WW WW X 


f à A à 
p WW WD © 、 Ww w 


o o E 0 o e e © 


HTML5+CSS+JavaScript 网 页 布局 从 入 门 到 精通 


«script type-"text/Javascript" language="javascript"> 
window.onload-function() { 
babyzone.scroll(4,"banner list","list","banner info"); 
j 
</script> 
«script type="text/javascript" src=" Scripts/banner.js"7«/script^ 


Dw zP) 86) Ă S&V) 插入 (1) 修改 (M) 格式 (0) 命令 (C) 站 点 (S) ”窗口 (W) ”帮助 (H) 
indexhtml x jsdiv - D\book\DIV+CSS\chapO3\index.html 


style. css banner.js AC RunhctiveContent. js swfobject modified. js m 


人 H, 


1 Kldoctype html> 
2 <html> ÉVA 
3 <head> B a E - jsdiv QU. Arb 2015/ 
4 <meta http-equiv="Content-Type” content-"text/html; charset-gb2312" /> EHE ess 文件 夹 2015/ 
5 <link rel="stylesheet” href-"css/style.css" type="text/css” /> CES flesh 文件 赤 — 2015/ 
6 — title» MRH title» i . 
TE cript ty ext/javascript' langu "javascript"? c.m images 文件 来 2015/ 
8 nload-function()[ m.m imgs 文件 夹 2015/ 
ü 9 scroll(4, "banner list","list", "banner info"); H-B psd wi  2015/ 
y Me E] Scripts 文件 夹 。 2015/ 
LR a $ : r ! [005 AC RunAct... —— 9KB JScrip... 2008/ 
B < ipt type= text/javascript src= Scripts/banner. J: A TAS = E 
= <script srcz"Scripts/ÀC RunActiveContent. js" type= Tp ></script> | T banner.js 3KB JScrip... 2015/ 
14 <script src-"Scripts/swfobject modified. js" type-"text/ javascript »X/script? pe ü expressIn... 1KB HEEL... 2015/ 
sl 15 </head> (0 "5 swfobject... 22KB JScrip... 2015/ 
| 16 “body> — ， o7 index html SKB HTML 文档 2015/ 
s Pd edis i o javascript.html —— 1KB ITIL 文档 20157 
19 «div id-"logo"»Ximg src=" images/index_01. gif“></div> 
BA 20 <div id-"dachang2"? 
[9l 21 <object id-"FlashID' classid-"clsid:D2TCDB6E-AE6D-11cf-96B8-444553540000" width-"180" height-"383"» 
22 <param name-"movie" value-"flash/nav. swf" /> — £ 
& 23 <param name="quality" value="high" /> 日 期 : 2015/9/30 11:26 大 小 : 3KB 
m 24 <param name-"wmode" value-"opaque" /> 
EM 25 <param name-"swfversion" value-z"6.0.65.0" /> 
=| 26 《1-- 此 param 标签 提示 使 用 Flash Player 6.0 r65 和 更 高 版 本 的 用 户 下 载 最 新 版 本 的 Flash 
=+ Playere 如 果 您 不 想 让 用 户 看 到 该 提示 ， iB HM. -> 
— 27 <param name-"expressinstall" valus’ Scripts/expressInstall.swf" /> 
$] 28 《!-- 下 一 个 对 象 标签 用 于 非 IE 浏览 器 。 所 以 使 用 IECC 将 其 从 IE 隐藏 。 —— 
29 《!--[if I!IE]; > 


AU wes A+ hh ONY Was" 202" 


LI 
© Qý @. 1042 x 467 


Am -n+ mA nn rr la dac a "Fla fur 


图 4-15 ”加 入 链接 代码 
(4) 按 〈F12〉 键 残 可 以 看 到 图 片 切换 的 效果 了 ， 如 图 4-16 所 示 。 


4-16 图 片 切换 的 动画 效 末 


第 有 gs Photoshop 网 页 设计 与 应 用 


对 于 一 个 前 端 设 计 师 而 言 ， 苔 握 一 定 的 网 页 设计 知识 并 会 使 用 Photoshop 等 软件 进行 优 


化 ， 是 十 分 必要 的 。 从 设计 的 内 容 来 说 ， 网 站 首页 的 设计 主要 包括 版 式 的 分 析 设 计 、 网 页 的 
大 小 设计 、 导 航 条 的 设计 及 页 面 框 染 的 搭建 与 分 割 等 工作 。 网 页 设计 作为 一 种 视觉 语言 ， 特 
列 讲究 编排 和 布局 ， 昌 然 主页 的 设计 不 等 同 于 平面 设计 ， 但 它们 有 许多 相近 之 处 。 本 章 将 介 
绍 网 站 设计 的 要 上 后、 网 页 设计 的 流程 等 内 容 。 


"TL VAVHEZE TIU 


本 章 学 习 重点 : 


(7 网 站 荣 划 的 基础 知识 

(7 网 站 首页 的 设计 知识 

O 首页 版 式 设计 基础 

(7 首页 框架 内 容 的 细 化 

O 掌握 网 页 的 全 程 设 计 方法 


"s HTML5*CSS-*JavaScript CELITENBELI. 


CP 网 站 的 策划 准备 工作 


建设 一 个 网 站 ， 目 的 是 通过 网 络 宣传 企业 的 形象 、 推 广 企业 业务 ， 或 者 问 网 站 的 访问 者 


展示 和 销售 产品 。 那 么 前 期 应 该 进行 哪些 集 划 准备 工作 呢 ?” 本 市 将 介绍 网 站 建设 的 前 期 准备 
工作 。 


zu C Pl S EE 1 BU RR AS IN TS XL 


建设 网 站 首先 需要 明确 网 站 的 建设 目的 、 访 问 用 户 的 定位 、 实 现 的 功能 、 发 布 时 
间 、 成 本 预算 、 网 站 VI 风格 等 。 网 站 建设 是 展现 企业 形象 、 介 绍 产品 和 服务 、 体 现 企 
业 肥 展 战略 的 重要 途径 乙 一 ， 因 此 必须 从 总 体 上 对 网 站 进行 一 定 的 规划 和 设计 ， 从 而 做 
出 切实 可 行 的 实施 方案 。 

建立 网 站 的 基本 工作 流程 如 图 5-1 所 示 。 


定位 网 站 的 建设 主题 
拟定 网 站 访问 群体 
企业 网 站 的 结构 策划 搜集 网 站 的 资源 
设计 网 站 结构 图 
规划 网 站 文件 及 目录 


租用 服务 空间 (或 购买 服务 器 ) 
设计 规划 设计 网 页 的 CI 效果 

设计 网 页 内 容 

细 化 网 站 的 结构 


设计 网 站 文件 夹 

mM 设置 本 地 站 点 

设计 实现 设置 服务 器 端 站 点 
网 页 的 开发 与 设计 
网 站 的 上 传 


维护 与 推广 


5-1 建立 网 站 的 基本 工作 流程 


有 /定位 网 站 的 主题 


由 于 网 站 的 名 称 关 系 到 浏览 者 是 否 容 易 接 受 ， 所 以 要 注意 以 下 两 反 : 

(1) 网 站 名 称 要 明确 网 站 内 容 。 如 “中 国 大 学 生 交 友 网 ”“ 十 字 乡 网 站 ”每 。 针 对 企业 
网 站 建设 而 言 ， 可 以 用 公司 的 名 称 或 者 销售 的 产品 来 定位 主题 。 

(20 网 站 名 称 要 易 记 ， 名 称 不 要 太 抛 口 、 生 个。 

不 管 要 建设 的 是 一 个 单纯 传播 信息 的 公益 网 站 还 是 商务 网 站 ， 上 只 有 明确 了 网 站 的 主题 ， 


Photoshop H n ic YT 5i Iv FH 


才 可 以 正确 地 进行 后 续 工作 的 分 析 与 实施 。 
28 LC 拟定 网 站 访问 群体 


在 定位 好 网 站 的 主题 后 ， 网 站 的 服务 对 象 是 谁 呢 ?哪些 人 会 有 兴趣 先 来 浏览 我 们 将 要 建 
设 的 网 站 ? 划 定 网 站 浏览 者 群体 的 重要 性 便 立 即 体现 出 来 。 因 为 只 有 确认 好 观众 的 需要 ， 才 
能 正确 地 分 析 各 种 有 用 的 信息 ， 把 握 网 站 的 传播 要 氮 与 经 营 理 您 ， 吸 引 更 多 的 顾客 ， 达 到 网 
站 建设 的 目标 。 

这 里 以 迪士尼 网 站 为 例 ， 说 明 拟 定 网 站 访问 群体 的 重要 性 。 迪 士 尼 网 站 的 首页 如 图 5-2 
所 示 。 该 网 站 的 主要 浏览 者 是 儿 重 ， 因 此 从 内 容 结构 到 赢 色 的 设计 都 是 从 儿 重 的 辟 好 出 发 ， 
制作 的 网 站 很 有 趣味 性 ， 能 让 访问 的 孩子 一 下 子 就 喜欢 上 这 个 网 站 。 


/ D 迪士尼 中 国 言 网 x VS 
^ C fi | www.dolcn ax B= 


[À hao123_ 上 网 导航 网 上 购物 淘宝 网 D AGES [D 京东 商城 专注 于 Win7 


迪士尼 


E | 


图 5-2 ”迪士尼 网 站 


| Section | 


网 站 荣 划 的 重点 


在 进行 网 站 设计 之 表 ， 明 确 网 站 设计 的 风格 、 特 点 是 很 重要 的 ， 下 面 介绍 网 站 建设 整体 
策划 设计 的 一 些 基 础 知识 。 网 站 设计 包含 的 内 容 非 常 多 ， 大 体 分 为 以 下 两 个 方面 : 

CD 利用 制作 网 站 的 软件 (如 Dreamweaver) 进行 网 页 设计 、 文 字 排 版 、 链 接 的 设计 、 
动态 网 页 的 设计 等 。 前 期 还 要 利用 Photoshop 或 者 Fireworks 等 平面 设计 软件 实现 平面 设计 、 
静态 无 声 图 片 设计 ， 根 据 需 要 还 可 以 利用 Flash 实现 动画 效果 。 

(2) 网 站 的 延伸 设计 。 它 是 指 脱离 软件 ， 在 网 站 建设 之 前 、 之 后 进行 的 网 站 建设 与 入 
划 ， 主 要 包括 网 站 的 主题 定位 和 浏览 群 的 定位 、 智 能 交互 、 制 作 和 全 划 、 形 象 包 北 、 宣 传 营 


销 等 。 


d 


"P HTML5*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


JU 网 站 栏目 的 设计 


在 明确 网 站 的 主题 和 风格 之 后 ， 就 要 围绕 主题 制作 相应 的 内 容 。 首 先 选 择 相应 的 网 站 题 
材 ， 也 就 是 给 网 站 定位 。 

下 面 是 一 些 常 见 的 网 络 栏 目的 题材 。 

d) 商业 类 网 站 栏目 : 

公司 简介 、 公 司 动态 、 在 线 搜索 、 购 物 消费 、 网 上 招聘 、 产 品 介绍 、 在 线 加 盟 、 股 市 信 
息 、 流 行情 报 、 阳 光 服 务 、 支 持 下 载 、 网 上 公告 等 。 

(2) 娱乐 生活 类 网 站 栏目 : 

国画 画廊 、 古 典 音 乐 、 武 嚣 博物馆、 古今 佳 句 名 言 、 游 戏 排行 榜 、 游 戏 天 党 、 人 金庸 客 
栈 、 象 棋 世 家 、 能 吃 是 福 、GIF 动画 库 、 陶 艺 园地 、 漫 画 天 地 、 中 国足 球 、 摄 影 俱 乐 部 、 幽 
默 轻松 、 体 育 博览 、 名 卡 、 旅 游 天 地 、 电 影 世 界 、 影 视 偶像 、 天 文 星 容 、MIDI 金曲 、 
宠物 猫 、 儿 歌 专集 等 。 
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所 谓 VI CVisual Identity， 视 觉 识 别 )， 通 俗 地 讲 就 是 通过 视觉 来 统一 网 站 的 形象 。 一 个 
好 的 企业 网 站 和 实体 公司 一 样 ， 也 需要 整体 的 形象 包装 和 设计 。 准 确 鸭 、 有 创意 的 VI 设计 
对 网 站 的 宣传 推广 有 事半功倍 的 效果 。 在 网 站 主题 和 名 称 确 定之 后 ， 需 要 思考 的 驳 是 网 站 的 
VI 形象 了 。 其 实 ， 现 实生 活 中 的 VI 策划 比比 丝 是 ， 例 如 肯德基 公司 ， 全 球 统 一 的 标志 、 
彩 和 产品 包装 给 人 的 印象 极为 深刻 。 

接 下 来 介绍 网 站 VI 形象 的 主要 内 容 : 

1. 网 站 Logo 的 设计 

网 站 Logo 就 是 网 站 的 标志 。 网 站 Logo 是 站 点 特色 和 内 涵 的 集中 体现 ， 使 浏览 者 看 见 
Logo 束 联 想起 站 点 。 目 前 国内 、 国 际 的 网 站 已 经 相当 多 了 ， 要 想 与 众 不 同 ， 跟 其 他 网 站 进 
ÍT Logo 链接 交换 是 很 有 必要 的 。 人 简单 地 说 孢 是 在 别人 的 网 站 上 放 一 个 用 户 网 站 的 Logo， 用 
来 链接 到 目 己 的 网 站 。 寿 Logo 引 人 人 注目， 网 站 的 浏览 量 束 能 增加 。 

注意 : 

(D 通常 ，Logo 的 大 小 一 般 设 计 为 88x30 像素 。 

Logo 标志 的 设计 创意 来 自用 户 网 站 的 名 称 和 内 容 ， 可 以 是 中 文 、 英 文字 母 ， 可 以 是 符 
号 、 图 案 ， 可 以 是 动物 或 者 人 物 等 。 例 如 ，Baidu 公司 就 是 以 Baidu 加 一 个 小 脚 丫 图 形 及 中 
X “百度 ”作为 象征 性 标志 ， 很 吸引 人 。 

(2) 如 果 用 户 本 身 拥 有 不 错 的 企业 Logo， 也 是 可 以 用 作 网 站 Logo 的 ， 这 样 能 让 用 户 的 
网 站 VI 和 企业 的 VI 保持 一 致 。 

网 站 Logo 不 仪 蛙 要 考虑 在 计算 机 电 分 辩 京 屏 秦 上 的 显示 效果 ， 更 应 该 考虑 网 站 整体 发 
展 到 一 定 规模 时 相应 推广 活动 所 要 达到 的 效果 ， 使 其 在 应 用 于 各 种 媒体 时 也 能 充分 发 挥 
Logo 的 视觉 效果 ， 还 应 考虑 网 站 Logo 在 传真 、 报 纸 、 杂 志 等 传媒 介质 上 的 单 色 效 果 和 和 反 白 
效果 、 在 织物 上 的 纺织 效果 、 在 车 体 上 的 油漆 效果 、 制 作 徽 草 时 的 金属 效果 、 墙 面 立 体 的 造 
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型 效果 等 。 

2. 网 站 设计 的 标准 色彩 

不 可 否认 网 站 给 人 的 第 一 印象 来 自视 觉 冲击 ， 因 此 确定 网 站 的 标准 色彩 是 相当 重要 的 一 
步 。 不 同 的 色彩 搭配 将 产生 不 同 的 视觉 效果 ， 当 然 可 能 会 影响 到 浏览 者 的 情绪 。 网 站 的 选择 C 
和 人 确定， 是 根据 网 站 所 选择 的 题材 和 用 户 自 己 的 个 人 性 格 决定 的 。 

“标准 色彩 ”就 是 指 能 体现 网 站 形象 和 延伸 内 涵 的 色彩 。 例 如 在 当 劳 的 红色 条 块 ，163 
邮箱 首页 的 天 蓝 色 每 都 给 人 很 贴切 、 很 和 谐 的 视觉 效果 。 

一 个 网 站 的 标准 色彩 通常 不 超过 3 种 ， 如 果 太 多 会 让 人 了 眼花 综 乱 。 标 准 色 彩 要 用 于 网 站 
——— PR a 。 当 然 其 他 色彩 也 可 以 使 用 ， 但 
只 是 作为 点 级 和 衬托 ， 绝 不 能 喧 宾 夺 常 适合 于 网 站 标准 色 的 颜色 有 蓝 色 、 黄 / 查 色 、 
黑 / 灰 /白色 三 大 系列 。 

建议 : 

(1) 在 建设 网 站 之 前 ， 设 计 人 员 一 定 要 了 解 网 站 所 要 传达 的 信息 和 品牌 ， 选 择 可 以 加 
强 这 些 信息 的 颜色 。 例 如 设计 一 个 强调 稳健 的 金融 机 构 ， 首 先 要 选择 冷色 系 ， 如 蓝 色 、 
灰色 或 者 绿色 。 在 这 样 的 情况 下 ， 如 果 使 用 暖色 系 或 者 活泼 的 色 系 ， 可 能 会 破坏 该 网 站 
的 品牌 。 

(2) 设计 人 员 还 要 了 解 此 网 站 的 读者 群 ， 文 化 差异 可 能 会 使 色彩 产生 非 预期 的 反应 ， 同 时 
还 要 考虑 ， 不 同 地 区 与 不 同年 龄 层 对 颜色 的 反应 也 会 有 所 不 同 。 目 前 ， 年 轻 族群 一 般 比 较 喜 欢 
富有 视 党 冲击 的 饱和 色 ， 当 然 这 样 的 颜色 在 一 定 程 度 上 引 不 起 高 年 龄 层 人 群 的 兴趣 。 

(3) 网 站 的 设计 不 要 使 用 过 多 的 颜色 ， 主 色 系 及 修饰 色 共 选择 4~5 个 颜色 就 够 了 ， 太 
多 的 颜色 会 导致 混淆 ， 会 分 散 读者 的 注意 力 。 

(4) 在 阅读 的 部 分 使 用 对 比 色 ， 因 为 颜色 太 接 近 无 法 产生 足够 的 对 比 效 果 ， 也 会 影响 阅 
读 ， 通 常 白 底 黑 字 的 阅读 效果 最 好 。 

(5) 通常 在 设计 网 站 时 采用 灰色 阶 来 测试 对 比 。 在 用 户 处 理 黑色 、 和 白色 和 灰色 以 外 的 磊 
色 的 时 候 ， 有 时 候 会 很 难 决定 每 个 颜色 的 相对 值 。 为 了 确认 色 盘 能 提供 足够 的 对 比 ， 可 以 建 
立 一 个 仿真 网 站 ， 并 将 它 转换 成 灰色 阶 

(6) 设计 网 站 时 选择 颜色 也 要 注意 时 效 性 ， 同一 个 色彩 很 容易 充斥 整个 市 场 ， 且 消费 者 
很 快 就 对 流行 色彩 感到 有 麻木 。 但 从 另外 一 个 角度 来 看 ， 使 用 多 年 前 的 流行 色彩 往往 会 引起 人 
们 的 怀旧 之 情 。 

(7) 使 用 软件 设计 网 页 ， 在 选择 颜色 时 要 考虑 功能 性 的 颜色 ， 不 要 所 了 对 关键 信息 部 分 
建立 功能 性 的 颜色 ， 例 如 标题 和 超 链接 等 。 

(8) 还 要 注意 网 站 色差 问题 。 每 一 个 网 站 开发 人 员 都 知道 ， 即 使 是 网 络 通用 颜色 在 跨 平 
台 显 示 的 时 候 也 会 有 些 不 同 ， 因 此 要 在 不 同 的 平台 上 测试 用 户 的 色 盘 ， 

在 色彩 的 运用 过 程 中 还 应 注意 由 于 国家 、 种 族 、 宗 教 和 信仰 的 不 同 以 及 地 理 位 置 、 文 化 
修 弈 的 差异 等 ， 不 同 的 人 和 群 对 色彩 的 喜好 有 痢 很 大 的 差异 ， 上 所 以 在 设计 时 需要 考 夸 主要 用 户 
群 的 构成 和 背景 。 

一 般 来 说 ， 不 同 的 色彩 传达 的 含义 有 所 不 同 ， 例 如 : 

e 红色 代表 了 热情 、 浪 漫 、 火 烙 、 暴 力 、 侵 略 ， 而 且 红 色 在 很 多 文化 中 代表 的 是 停止 

的 信号 ， 用 于 警告 或 禁止 一 些 动作 。 
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绿色 代表 了 目 然 、 稳 定 、 成 长 、 忌 妨 ， 绿 色 在 茶 些 文化 中 与 环保 有 天。 
黄色 代表 了 明亮 、 光 瘤 、 疾 病 、 刁 弱 。 
REAR 1 BE7J. TEL. BU. PET. Jus. IS. 
HERKKI A AE. B. RE, ODE. VA. $2. 
网 站 设计 的 标准 字体 

标准 字体 是 指 用 于 标记、 标题 、 主 亲 单 的 特有 字体 。 通 第 ， 网 站 默认 的 字体 是 宋体 ， 当 
然 为 了 体现 网 站 的 “与 众 不 同 ” 可 以 根据 需要 选择 一 些 特别 的 字体 。 例 如 ， 为 了 体现 专业 
可 以 使 用 粗 仿宋 体 、 为 了 体现 设计 精美 可 以 用 广告 体 、 为 了 体现 杀 切 随意 可 以 用 手写 体 等 。 
总 之 ， 我 们 要 根据 目 己 的 网 站 所 表达 的 内 容 选 择 贴 切 的 字体 。 

目前 第 见 的 中 文学 体 只 有 三 三 十 种 ， 常 见 的 器 文学 体 有 近 百 种 ， 网 络 上 还 有 许多 专用 的 
瑞 文 乞 术 字 体 供用 户 下 载 ， 所 以 要 寻找 一 球 满 意 的 字体 并 不 算 困 难 。 需 要 说 明 的 是 ， 要 使 用 
非 默 认 和 字体 束 必须 把 文字 内 容 设 置 成 图 片 的 格式 ， 因 为 一 部 分 浏览 者 的 计算 机 里 没有 安 状 这 
种 特别 学 体 从 而 无 法 正常 显示 。 


D > 网 站 设计 的 宣传 标语 


网 站 的 宣传 标语 在 不 同 程度 上 会 体现 网 站 的 精神 、 网 站 的 目标 ， 即 用 一 句 话 其 全 一 个 词 
来 高 度 概 括 网 站 的 内 容 ， 类 似 于 实际 生活 中 的 广告 金 句 。 

例如 ， 移 动 通 信和 动感 地 帝 的 广告 语 “ 我 的 地 胡 ， 听 我 的 ”， 委 当 劳 的 “我 就 言 欢 ”。 当 
然 ， 企 业 如 末 有 目 己 的 宣传 语 就 可 以 用 作 网 站 的 宣传 标语 ， 如 条 是 推广 产品 型 的 网 站 最 好 使 
用 产品 的 宣传 广告 语 。 

在 网 站 方面 ， 国 内 区 丈 有 名 的 百度 用 了 “百度 一 下 ”( 如 图 5-3 所 示 )。 网 站 宣传 标语 的 
选 定 可 以 充分 发 挥 设 计 痢 的 想象 力 。 
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确定 网 站 的 框架 ， 就 是 在 目标 明确 的 基础 上 完成 网 站 的 构思 创意 ， 即 总 体 设计 方 O) 
宁 。 这 是 在 题材 选 定 好 之 后 很 重要 的 一 步 ， 要 做 到 主题 鲜明 突出 、 要 点 明确 ， 束 要 以 简 
单 明 确 的 语言 和 画面 体现 站 点 的 主题 ， 调 动 一 切 手段 充分 表现 网 站 的 个 性 和 情趣 ， 从 而 
体现 出 网 站 的 特点 。 

网 站 应 包括 以 下 儿 个 内 容 。 

D 页 头 : 准确 无 误 地 标识 用 户 的 站 点 和 企业 标志 。 

2) 联系 方式 : 如 企业 的 地 址 、 电 话 和 E-mail 地 址 。 

3) 版 权 信息 : 声明 版 权 所 有 者 等 。 

注意 : 

重复 利用 已 有 信息 ， 如 客户 手册 、 公 共 关 系 文档 、 技 术 手 册 和 和 数据库 等 ， 可 以 轻 而 荔 举 
地 将 它们 用 到 企业 的 Web 站 点 中 。 

全 面 规划 架构 一 个 网 站 ， 通 种 选用 树 状 结构 大 致 把 每 个 页 面 的 内 容 大 纲 列 出 来 ， 尤 其 当 
用 户 要 制作 的 网 站 比较 大 时 规划 架构 好 网 站 显得 非常 重要 ， 还 要 考虑 以 后 可 能 的 扩充 性 ， 免 
得 做 好 后 要 一 改 再 改 整 个 网 站 的 染 构 ， 这 样 会 浪费 资源 与 精力 。 

大 纲 列 出 来 之 后 还 要 考虑 页 面 与 页 面 之 间 的 链接 关系 ， 是 星 形 、 树 形 ， 还 是 网 形 链接 ， 
当然 这 也 是 判别 一 个 网 站 优 劣 的 重要 标记。 链接 混乱 、 层 次 不 清 的 站 点 会 造成 浏览 者 浏览 蒜 
XE, xeu ATE. 

Ay TERNAK, Jp CCUEHTIEDdk. RAEE BXARH] "YEA" xS BUBT 
有 的 主要 链接 都 在 首页 上 ， 主 次 链接 之 间 的 相互 链接 是 可 逆 的 ， 如 图 5-4 所 示 。 其 中 流行 动 
态 、 最 新 专辑 、 在 线 听 歌 、 音 乐 教室 、 星 光 灿 烂 为 大 版 块 ， 搜 索引 擎 、 歌 曲 排行 、 友 情 链接 
在 首页 上 做 。 


最 新 专辑 


搜索 引擎 
歌曲 排行 
友情 链接 
图 5-4 “ 薄 公 英 ” 式 栏目 版 块 
在 框 染 确 定之 后 ， 束 可 以 有 条 不 芭 地 往 下 做 了 ， 这 为 网 站 将 来 的 发 展 打下 了 民 好 的 
基础 。 
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D 网 站 资料 的 收集 


网 站 建设 过 程 中 的 大 部 分 内 容 是 需要 一 定 的 取材 资料 的 ， 例 如 新 闻 肥 布 、 产 品 技术 知 
识 等 ， 可 以 在 网 上 或 者 是 通过 其 他 途径 搜集 一 些 资 料 进 行 元 实 。 束 企业 网 站 而 许 ， 主 要 是 
由 企业 目 行 决定 放量 哪些 企业 资料 和 产品 展示 ， 这 一 个 操作 环 市 比较 简单 ， 都 是 企业 目 喘 
拥有 的 资料 。 但 一 个 完整 的 网 站 还 需要 很 多 相关 内 容 的 填充 ， 如 新 闻 、 行 业 动态 等 。 这 些 
资料 一 般 可 从 报纸 、 杂 志 、 光 盘 等 媒体 中 把 相关 的 资料 收集 整理 ， 然 后 进行 一 定 的 编辑 就 
可 以 了 。 

为 外 一 个 好 的 方法 束 是 从 网 络 上 收集 资料 ， 我 们 只 要 到 百度 、 搜 狗 等 搜索 引擎 上 舍 找 相 
应 的 关键 子 ， 束 可 以 找到 很 多 资料 。 但 是 必须 注意: 在 Copy RAD 或 引用 他 人 的 资料 文 
半 时 ， 要 对 重 知 识 版 权 ， 有 特别 声明 、 茶 止 复制 的 请 不要 据 为 己 用 ， 即 使 是 允许 复制 的 也 应 
该 在 引用 时 注 明 作者 、 出 处 。 

还 有 就 是 收集 的 资料 必须 合法 ， 有 基体 请 参照 我 国 的 《计算 机 信息 网 络 国际 联网 安全 你 护 
管理 办 法 》 的 明确 规定 。 

到 这 里 ， 已 经 基本 上 完成 制作 网 站 的 准备 工作 了 。 


DA 网 站 制作 的 注意 事项 


有 了 表面 几 贡 的 知识 ， 在 制作 网 站 时 还 要 特别 注意 以 下 问题 ， 这 样 才能 保证 开发 网 站 的 
实用 性 。 

1. 网 站 版 式 的 设计 

网 站 作为 一 种 视觉 语言 要 讲究 编排 和 布局 ， 虽 然 首 页 的 设计 不 等 同 于 平面 设计 ， 但 它们 
有 许多 相近 之 处 ， 设 计 人 员 应 充分 加 以 利用 和 借鉴 。 版 式 设 计 通 过 文字 、 图 形 的 空间 组 合 表 
达 出 和 谐 与 美 。 一 个 优秀 的 网 站 设计 者 要 知道 每 一 段 文字 、 图 形 该 放 在 何 处 ， 才 能 使 整个 网 
站 生 辉 。 多 页 面 站 点 的 编排 设计 要 求 把 页 面 之 间 的 有 机 联系 很 好 地 反映 出 来 ， 特 别 要 处 理 好 
页 面 之 间 与 页 面 之 内 的 秩序 。 通 常 为 了 达到 最 佳 的 视觉 表现 效果 ， 应 讲究 整体 布局 的 合理 
性 ， 使 浏览 者 有 一 个 流畅 的 视觉 体验 。 

2. 网 站 形式 与 内 容 的 统一 

要 将 丰富 的 内 容 和 多 样 的 形式 组 织 成 统一 的 页 面 结 构 ， 形 式 语 言 必须 符合 页 面 的 内 
容 ， 体 现 内 容 的 丰富 含义 。 运 用 对 比 与 调和 、 对 称 与 平衡 、 节 奏 与 韵律 以 及 留 白 等 手 
段 ， 通 过 空间 、 文 学 、 图 形 之 间 的 相互 关系 建立 整体 的 均衡 状态 ， 产 生 和 谐 的 美感 。 例 
如 对 称 原 则 的 均衡 性 有 时 会 使 页 面 显得 采 板 ， 但 如 果 加 入 一 些 宣 有 动感 的 文字 、 图 案 或 
采用 夸张 的 手法 来 表现 内 容 往往 会 达到 比较 好 的 效果 。 上 点 、 线 、 面 是 视觉 语言 中 的 基本 
元 素 ， 要 使 用 点 、 线 、 面 的 互相 穿插 、 互 相 衬 托 、 互 相 补 充 构 成 最 佳 的 页 面 效 果 。 网 站 
设计 中 点 、 线 、 面 的 运用 并 不 是 孤立 的 ， 在 很 多 时 候 都 需要 将 它们 结合 起 来 表达 完美 的 


设计 意境 。 
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3. 三 维 空间 的 构成 和 虚拟 现实 

网 络 上 的 三 维 空间 是 一 个 假想 空间 ， 这 种 空间 关系 需 信 助 动 静 变 化 、 图 像 的 比例 关系 等 
室 间 因 素 表 现 出 来 。 在 页 和 面 中 ， 图 刻 、 文 学 前 后 合 压 ， 或 页 面 位 置 变 化 所 产生 的 视觉 效 末 均 
不 相同 。 图 片 、 文 字 前 后 登 压 所 构成 的 空间 层次 目前 还 不 多 见 ， 网 上 更 多 的 是 一 些 设计 比较 他) 
规范 、 简 明 的 页 面 ， 这 种 登 压 排列 能 产生 强 节 压 的 空间 层次 ， 视 觉 效果 强烈 。 网 站 上 各 上 见 的 
是 页 而 上 、 下 、 左 、 右 、 中 位 秆 所 产生 的 空间 关系 ， 以 及 足 密 的 位 置 关系 所 产生 的 空间 层 
次 ， 这 两 种 位 置 天 系 使 产生 的 空间 层次 家 有 弹性 ， 同 时 也 让 人 产生 轻松 或 紧迫 的 心理 感受 。 
目前 ， 人 们 已 不 满足 于 HTML 语言 编制 的 二 维 Web 页 面 ， 三 维 世界 的 诱惑 开始 吸引 更 多 
的 人 。 

4. 多 媒体 功能 的 利用 

网 络 资源 的 优势 之 一 古 多 炬 体 功能 ， 如 果 要 吸引 浏览 者 的 注意 力 ， 页 面 的 内 容 还 可 以 借 
助 三 维 动画 、Flash 动画 等 来 表现 。 但 要 注意 ， 由 于 网 络 市 宽 的 限制 ， 在 使 用 多 媒体 的 形式 
表现 网 站 的 内 容 时 应 考虑 客户 端的 传输 速 有 度 。 

5. 网 站 测试 和 改进 

网 站 测试 实际 上 是 模拟 用 户 询 问 网 站 的 过 程 ， 用 于 在 测试 中 发 现 问 题 并 改进 设计 ， 要 注 
意 让 用 户 参 与 网 站 测试 。 

6. 内容 更 新 与 沟通 

网 站 的 Web 站 点 建立 之 后 要 不 断 更 新 内 容 。 站 点 信息 的 不 断 更 新 能 让 浏览 者 更 多 地 了 
解 企业 的 发 展 动态 和 网 上 职务 等 ， 同 时 也 会 帮助 企业 建立 民 好 的 形象 。 通 常 在 企业 
的 Web 站 点 上 要 认真 回复 用 户 的 电子 邮件 和 传统 的 联系 方式 ， 如 信件 、 电 话 咨 询 和 传真 ， 
做 到 有 问 必 答 。 最 好 将 用 户 的 用 意 进 行 分 类 ， 如 售 前 一 般 了 解 、 售 后 服务 等 ， 由 相关 部 
门 处 理 ， 使 网 站 浏览 者 感受 到 企业 的 真实 存在 并 由 此 产生 信任 感 。 需 要 注意 的 是 ， 不 要 
许 谢 实 现 不 了 的 东西 ， 在 真正 有 能 力 处 理 回 复 乙 前 不 要 恳求 用 户 和 输入 信息 或 多 列 一 大 挫 
目 己 不 能 及 时 答复 的 问题 。 如 条 要 求 浏览 者 目 愿 提供 其 个 人 的 信息 ， 应 公布 并 认真 履行 
AS ES A KY e 

7. 合理 运用 新 技术 

狐 的 网 站 制作 技术 层 出 不 姑 ， 但 网 站 设计 者 一 定 要 合理 地 运用 网 站 制作 新 技术 。 对 
于 网 站 设计 者 来 说 ， 永 远 要 记 住 用 户 方便 快捷 地 得 到 所 需要 的 信息 是 最 重要 的 。 网 站 设 
计 者 必须 学 习 掌 握 网 站 设计 的 新 技术 ， 如 HTML5、APP 开发 等 ， 然 后 根据 网 站 的 内 容 
和 形式 合理 地 将 新 技术 应 用 到 设计 中 。 


ES 


ection 


网 页 设计 全 程 实例 


本 节 以 一 个 网 站 的 首页 设计 为 例 简单 介绍 网 站 首页 设计 的 流程 。 在 操作 中 要 特别 注意 一 
些 标准 ， 如 页 面 的 大 小 及 像素 等 。 必 须 严 格 按照 要 求 来 设计 ， 人 否则 在 发 布 网 页 时 会 产生 图 上 
不 显示 或 者 网 页 过 大 的 错误 。 实 例 中 的 首页 包括 Logo、 小 导航 、Banner、 大 导航 、 框 架 模 块 
和 版 权 几 个 部 分 ， 最 终 完成 的 效果 如 图 5-5 所 示 。 


" HTML54CSS- JavaScript CELITNBELTI. 


z azu | Mes, 小 导航 区 域 
Logo = Aae "MES i 
m. E 大 导航 区 域 
D aR eel Oki nM) SRS 
Banner 区 域 
= 一 一 框架 模块 区 域 
版 权 区 域 


5-5 将 要 设计 的 界面 


下 注目 页 版 式 的 议 计 分 析 


设计 首页 版 式 的 第 一 步 是 设计 版 面 的 布局 ， 类 似 于 传统 的 报刊 、 杀 志 编 辑 ， 网 页 也 需要 
排版 布局 。 人 简单 地 说 布局 孢 是 在 一 个 限定 的 范围 内 合理 地 安排 、 布 置 狗 像 和 文字 的 位 置 ， 把 
文章 、 信 息 按 照 一 定 的 顺序 罗列 出 来 ， 同 时 对 页 和 面 进行 装饰 和 美化 。 随 看 动态 网 页 技术 的 友 
展 ， 网 站 日 益 趋 癌 以 HIMLS+CSS+JavaScript 的 组 合 进 行 建 设 ， 当 然 网 页 版 面 的 静态 设计 仍 
是 设计 人 员 必 须 学 习 和 掌握 的 。 

1. 版 面 草图 的 创意 

前 面 提 到 一 个 网 站 的 首页 主要 由 导航 、Banner、 框 架 模 块 、 版 权 及 企业 Logo 等 内 容 组 
成 。 传 统 的 首页 格式 设计 并 没有 固定 的 规则 与 模式 ， 主 要 是 由 设计 师 和 用 户 共同 决定 的 。 值 
得 一 提 的 是 ， 上 和 面 提 到 的 功能 模块 一 个 都 不 能 少 。 

注意 : 

网 页 的 版 面 指 的 是 浏览 者 从 浏览 器 上 看 到 的 完整 页 面 (可 以 包含 框架 和 层 )。 由 于 每 个 
人 设置 的 显示 器 分 辩 率 有 所 不 同 ， 屏 幕 有 800 x 600 像素 、1024 x 768 像素 等 不 同 尺寸 。 

版 面 草 案 的 形成 决定 了 网 页 的 基本 面貌 ， 相 当 于 网 站 的 初步 设计 创意 ， 通 常 来 自 一 些 现 
有 设计 作品 和 图 形 图 像素 材 的 组 合 、 改 造 及 加 工 。 

2. 网 站 版 面 的 粗略 布局 

在 版 面 音 案 的 基础 上 ， 将 列 淮 的 功能 模块 安排 到 页 面 上 的 适当 位 置 。 框 架 模块 主要 包 合 
主 沫 单 、 栏 目 条 、 广 告 位 、 邮 件 列 表 、 计 数 器 等 。 注 意 ， 这 里 必须 遵循 “突出 重点 、 平 衡 谐 
调 ” 的 原则 ， 将 网 站 标志 、 主 末 单 、 商 品目 录 等 比较 重要 的 模块 放 在 最 显眼 、 最 突出 的 位 
置 ， 然 后 再 考虑 次 要 模块 的 排放 。 

3. 网 站 版 面 的 最 后 定案 

网 站 版 面 的 最 后 定案 通俗 地 讲 就 是 将 粗略 布局 精细 化 、 其 体 化 。 在 布局 过 程 中 ， 需 
要 遵循 的 原则 有 以 下 儿 条 。 
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e FH: 残 是 指 版 面 的 图 像 和 文字 在 视觉 分 量 上 左右 、 上 下 几 个 方位 基本 相等 ， 分 布 

匀称 ， 能 达到 安定 、 平 项 的 效果 。 

e 呼应 : 在 不 平衡 布局 中 的 补救 措施 ， 使 一 种 元 素 同 时 出 现在 不 同 的 地 方 ， 形 成 相 

互联 系 。 

e 对 比 : 了 天 是 利用 不 同 的 色彩 、 线 条 等 视觉 元 素 相互 并 置 对 比 ， 造 成 男 面 的 多 种 变 

化 ， 从 而 达到 丰 遇 视觉 的 效 琳 。 

e Ju: 芷 密 关 系 本 是 绘画 的 概念 。 足 ， 是 指 男 面 中 形式 元 素 稀 少 〈 甚 至 军 白 ) 的 部 分 
冤 ， 是 指 画 面 中 形式 元 兹 党 多 的 部 分 ， 在 网 页 设计 中 束 是 对 空白 的 处 理 运 用 。 太 满 、 太 
密 、 太 平均 是 任何 版 式 设 计 的 大 辟 ， 适 当 的 芷 密 搭 配 可 以 使 画面 产生 世 夫 感 ， 体 现 出 
网 站 的 格调 与 品位 。 

在 制作 网 站 时 ， 能 适当 地 把 以 上 设计 原则 运用 到 页 面 布局 中 ， 会 产生 不 一 样 的 效果 。 例 
如 ， 网 页 的 白色 背景 太 虚 ， 则 可 以 适当 地 加 些 色 块 ; ai 可 以 把 线条 和 符号 串 
联 起 来 :版面 左 侧 文 学 过 多 ， 在 右 侧 可 以 插 一 张 图 片 来 保持 平衡 。 经 过 不 断 地 演 试 和 推 斤 ， 
一 个 设计 方 采 束 会 渐渐 完善 起 来 。 
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网 站 的 网 页 大 小 是 有 一 定 限 度 的， 因为 浏览 者 浏览 网 页 的 显示 融 大 小 是 受 限 鸭 ， 所 以 设 
计 的 网 页 大 小 要 匹配 显示 需 的 大 小 ， 人 否则 在 浏览 网 页 时 会 看 不 到 完整 的 效果 。 首 页 的 大 小 设 
计 的 具体 步骤 如 下 : 

(1) 运行 Photoshop CC， 选 择 菜 单 柱 上 的 “文件 ”一 “ 狐 建 ”命令 ， 打 开 “ 新 建 ” 对 话 
框 ， 在 对 话 框 的 “名 称 ” 文 本 框 中 输入 文件 名 index; 在 “宽度 ”文本 框 中 输入 756， 单 位 为 
“像素 ” 在 “高 度 ” 文 本 框 中 输入 714， 单 位 为 “像素 ”， 在 “分 辨 率 ” 文 本 框 中 输入 72, 
PMN BRR”, W WERN” KAEN “RGB EN”, 单位 为 “8 M”; 把 “背景 内 
4t" RAN “AB”, 其 他 设置 保持 不 变 ， 如 图 5-6 rn. 


SHV: [nod | o— — 一 十 ] 


文档 类 型 : | 自 定 d 取消 | 


大 小 : - | frükTRR(S).. | 
宽度 (W): | MIRER (D). | 


&IE(H): 
AHRXE(R): 
颜色 模式 : | RGB 颜色 | 


背景 内 容 : | 白色 


高 级 
颜色 配置 文件 : | 工作 中 的 RGB: sRGB IEC619... * 
像素 长 宽 比 : | 方形 像素 


图 5-6 “新 建 ” 对 话 框 


S) 


f HTML5+CSS+JavaScript 网 页 布局 人 入门 到 精通 


注意 : 

现在 的 网 页 大 部 分 是 以 800 x 600 像素 以 上 的 模式 浏览 的 ， 因 此 通常 在 制作 网 页 时 ， 都 
选择 此 种 模式 。 但 是 由 于 浏览 器 浏览 网 页 的 时 候 采 用 滚动 条 ， 所 以 浏览 者 观看 到 的 网 页 宽度 
不 能 达到 800 像素 ， 一 般 为 780 像素 。 网 页 制作 中 分 辨 率 为 72 像素 /英寸 是 最 佳 设置 ， 这 样 
设计 出 来 的 网 页 效果 在 显示 器 中 可 以 看 得 很 清楚 ， 如 果 设 置 值 过 低 会 影响 观看 效果 ， 设 
置 值 过 高 会 影响 访问 的 速度 。 

(20 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 双 击 工具 栏 中 的 “缩放 工具 ”按钮 以 ， 或 者 按 
Ctrl+)》 组 合 键 ， 使 场景 按 100% 的 比例 显示 ， 此 时 的 效果 如 图 5-7 Pros 


03.4% D> 3 15:1.12M/0 字 节 


图 5-7 场景 100% 显 示 效 果 


DO 页 面 框架 的 搭建 


页 面 框架 的 搭建 位 时 地 说 束 古 在 首页 上 设计 好 整体 的 背景 框架 效果 ， 以 方便 后 面 放 
置 一 些 实际 内 容 ， 例 如 注册 系统 、 新 闻 系 统 、 网 上 购物 等 。 下 和 面 简 单 介 绍 页 和 面 框架 的 


设置 了 网 站 到 页 大 小 之 后 ， 在 “图 层 ” 面 板 中 单 击 “ 新 建 ” 按 钮 是 新建 一 个 图 层 ， 并 命 
名 为 “背景 框架 ”， 然 后 单 击 工具 箱 中 的 “和 矩形 选 框 工具 ”| 沁 ， 拖 动 鼠 标 在 该 图 层 上 绘制 如 
图 5-8 所 示 的 背景 效果 。 如 果 用 户 觉得 操作 比较 复杂 ， 可 以 直接 打开 素材 index.psd 中 的 背 
AXE AS Ee EUR e 
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图 5-8 用 Photoshop CC 设计 的 首页 背景 效果 


z5. a Banner K] > 


在 网 站 制作 中 ， 大 导航 与 小 导航 之 间或 者 之 下 应 该 有 一 个 Banner〈 动 态 栏 目 )，Banner 
顾名思义 就 是 广告 住 ， 这 个 功能 主要 给 企业 上 日 己 的 网 站 或 者 其 他 企业 进行 广告 宣传 。 如 果 是 
给 目 己 的 网 站 做 宣传 ， 那 么 应 该 是 对 该 网 站 的 高 度 概 括 。 通 凋 Banner 由 Flash 或 者 
JavaScript 来 设计 动画 的 切换 ， 本 实例 中 是 一 个 Flash 动画 ， 在 设计 首页 的 时 候 一 般 先 用 背景 
的 图 请 效 末 来 表示 。 在 Photoshop CC 的 “图 层 ” 面 板 中 单 击 “ 创 建新 组 ”按钮 o ， 创 建 一 
个 新 组 文件 夹 并 命名 为 banner， 然 后 在 该 文件 夹 里 面 拖 入 用 Flash 制作 的 背景 图 片 ， 效 果 如 
图 5-9 所 示 。 
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图 5-9 建立 Banner 背景 效果 
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下 小 导 般 的 制作 


小 导航 的 制作 步 又 如 下 : 

1) 在 Photoshop CC 的 “图 层 ” 面 板 中 单 击 “ 创 建新 组 ”按钮 天， 创建 一 个 新 组 文件 夹 
并 命名 为 “小 导航 ”%” 然后 单 击 工具 栏 中 的 “ 横 排 文字 工具 ”按钮 | 站 J， 在 右上 和 角 适当 的 位 置 
单 击 ， 分 别 输入 “收藏 本 站 ”、“ 联 系 我 们 ”， 字体 为 “宋体 入 大 小 为 “12 点 和 消除 锯齿 方 
XJ "Ju". BEA “000000”, 即 黑色 。 接 看 调整 各 字 的 距离 ， 在 适当 的 地 方 加 上 空格 ， 使 
它们 均匀 地 分 布 在 横 条 上 ， 如 图 5-10 所 示 。 设 置 出 来 的 小 导航 如 图 5-11 所 示 。 


图 5-10 文字 属性 的 设 首 


图 5-11 小 导航 的 内 容 


2) 文子 输 完 之 后 ,，“ 图 层 ” 和 面板 中 会 目 动 生成 一 个 文字 层 ， 用 户 可 根据 不 同 需 要 为 这 些 


文字 设置 一 些 特定 效 末 。 接 下 来 设置 小 导航 中 的 线条 ， 在 “图 层 ” 面 板 中 新 建 一 个 图 层 ， 将 


名 称 设 为 “线条 ” 这 里 主要 利用 Photoshop 中 的 椭圆 及 直线 工具 设置 ， 其 中 设置 颜色 值 为 
#457C00， 效 果 如 图 5-12 PZR- 


图 5-12 文学 背景 线条 的 设计 


3) 至 此 小 导航 的 设计 已 完成 ， 这 里 要 把 文字 层 和 线条 层 的 距离 及 位 置 设计 适当 ， 可 左 
右 调 整 文字 及 线条 的 位 置 ， 整 体 效 果 如 图 5-13 所 示 。 


图 $-13 ”小 导航 的 设计 效果 


页 中 基 大 导航 的 制作 


通 第 大 导航 是 构成 网 站 的 主要 框架 ， 把 网 站 中 一 些 重 要 的 内 容 进 行 分 类 ， 分 成 几 个 大 版 


第 5 草 


块 ， 从 而 构成 导航 条 。 大 导航 的 具体 制作 步 又 如 下 : 

1) 在 Photoshop CC 的 “图 层 ” 面 板 中 单 击 “创建 新 组 ”按钮 二， 创建 一 个 新 组 文件 夹 
并 命名 为 “大 导航 ” 导航 条 的 内 容 要 根据 用 户 网 站 的 经 营业 务 划 分 ， 这 里 以 本 章 中 涉及 的 
实例 为 参考 ， 划 分 成 8 个 功能 模块 ， 分 别 是 “公司 简介 ”“ 网 球 培训 ”“ 羽 毛 球 培训 ”“ 体 
育 用 品 ”“ 会 员 服 务 ”“ 在 线 留言 ~“ 招聘 信息 ”及 “明星 教练 "?。 所 以 要 在 “大 导航 ” 文 
件 夹 中 先 建立 8 个 齐 格 子 的 背景 效果 ， 背 景 颜 色 值 为 的 2AF0OB， 效 果 如 图 5-14 所 示 。 


5-14. 设置 大 导航 背景 效果 


20 用 文字 工具 在 大 导航 条 上 的 相应 位 置 分 别 输入 导航 对 单 的 文字 内 容 ， 字 体 为 “新 宋 
FRU. 大 小 为 “14 点 入 颜色 为 “FFFFFF” 即 白 色 ， 如 图 5-15 所 示 。 


公司 简介 ”网 球 培训 | 羽毛 球 培训 | 体育 用 品 ”会 员 服务 ”在 线 留 言 ”招聘 信息 ”明星 教练 
图 5-15 大 导航 的 设计 


至 此 ， 大 导航 的 界面 设计 完成 
ORI ARIASI it 


JB AS ULP. —A ME lb A CHI: Logo。 由 于 企业 都 有 目 己 的 Logo, 
此 在 设计 网 站 时 只 要 用 Photoshop 软件 打开 Logo 直接 应 用 于 网 站 即 可 。 这 里 的 操作 如 下 : 

1) Æ Photoshop CC 的 “图 层 ” 面 板 中 单 击 “ 创 建新 组 ”按钮 己 ， 创 建 一 个 新 组 文件 来 
并 命名 为 “版 权 ”， 然 后 选择 亲 单 栏 上 的 “文件 ”一 “打开 ”命令 ， 选 择 本 革 中 的 实例 源 文 
件 ， 即 选择 企业 Logo 文件 ， 打 开 企 业 的 Logo, WE 5-16 Mio REH RELER” 
二, 选中 整个 图 片 ， 按 (Ctrl+C〉 组 合 键 复制 Logo. 

2) 切换 到 设计 中 的 首页 ， 在 适当 的 位 置 按 〈CtrlH+V》 组 合 键 粘贴 图 片 。 用 户 选 择 企 业 
Logo 时 对 Logo 大 小 的 要 求 是 不 同 的 ， 此 时 可 单 击 工 具 栏 中 的 “移动 工具 ”按钮 着， 选择 
Logo 并 按 《Ctrit+T〉 组 合 键 ， 图 厂 周 围 会 出 现 边 框 ， 拖 动 左 下 角 的 方 框 ， 同 时 要 按 住 
《Shift〉 键 ， 使 图 片 等 比例 缩小 ， 如 图 5-17 所 示 ， 并 移动 到 首页 的 相应 位 置 。 


Photoshop 网 页 设计 与 应 用 
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logo.psd @ 100% (图 层 1 RGB/8) * 


* logo psd @ 100% (HE 1, RGB/8) * 
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图 5-16 Logo 的 导入 


index.psd @ 100% (logo, RGB/8£&) * 
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图 $-17 调整 Logo 的 大 小 


HTML5+CSS+JavaScript 网 页 布局 从 入 门 到 精通 


zm 


招聘 信息 ”明星 教练 


3) 单 击 工具 栏 中 的 “ 横 排 文 字 工具 ”按钮 TJ， 在 Logo 处 输入 企业 的 名 称 ， 并 在 该 页 面 


的 最 底下 输入 版 权 信 息 ， 效 果 如 图 5-18 所 示 。 


index.psd @ 100% (logo, RGB/8#) * 
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图 5-18 ”输入 版 权 文学 信息 的 效果 
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FILI Photoshop 网 页 设计 与 应 用 


I 内 容 的 设计 


前 面 所 提 到 的 框架 模块 区 域 是 用 来 安排 首页 内 容 的 。 首 页 内 容 相当 重要 ， 因 为 访问 者 进 (D) 
入 网 站 首先 看 到 的 是 首页 ， 首 页 上 的 内 容 是 否 精彩 在 一 定 程度 上 会 影响 访问 者 是 否 继续 浏 ” 刁 且 
览 。 在 首页 界面 设计 中 不 需要 把 各 部 分 的 内 容 完整 地 加 入 ， 只 需要 画 出 框架 。 在 Photoshop — — 
CC 的 “图 层 ”面板 中 单 击 “ 创 建新 组 ”按钮 马 ， 创 建 一 个 新 组 文件 夹 并 命名 为 “网 页 内 
AU. 然后 利用 前 面 介绍 的 方法 ， 根 据 用 户 建设 网 站 的 需要 输入 文字 内 容 并 绘制 背景 效果 ， 
完成 的 网 页 内 容 效 霖 如 图 5-19 所 示 。 
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图 5-19 网 页 的 内 容 设计 效果 


D 友情 链接 


首页 的 友情 链接 等 功能 也 是 非常 必要 的 ， 本 实例 采用 其 他 网 站 的 Logo 链接 来 实现 ， 有 
些 大 型 网 站 由 于 网 页 的 版 面 内 容 太 多 而 及 用 文子 链接 ， 这 里 放置 了 一 些 知 名 网 站 的 Logo 作 
为 后 面 链接 的 效果 ， 设 置 后 的 效果 如 图 5-20 所 示 。 


"s HTML5*CSS-* JavaScript 册页 布 让 人 X 门 是 


明星 教师 漳 介 : 


5-20 加 入 友情 链接 Logo 后 的 整体 效果 


AUEEXE, BUBQJIAEAEAM EREE, AREA REAR RAUA LIE. BOB 
页 设计 到 此 全 部 结束 了 ， 但 对 于 网 站 建设 来 说 这 只 是 一 个 开始 。 其 实 网 站 首页 的 设计 步骤 基 
本 上 大 同 小 民 ， 和 希望 读者 在 制作 之 前 多 看 其 他 成 功 的 作品 ， 多 上 网 浏览 ， 多 借鉴 ， 慢 慢 养 成 
目 己 完全 创意 设计 的 过 程 。 
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在 掌握 了 HTMLS、CSS 基础 知识 以 后 ， 即 可 开始 使 用 这 些 技术 实现 网 页 的 布局 。 本 章 
将 在 第 5 章 设 计 实 例 的 基础 上 使 用 HTML5+CSS 实现 网 页 的 基础 布局 。 本 章 的 知识 是 前 端 工 
程 师 必 学 的 内 容 ， 主 要 包括 使 用 Photoshop 完成 设计 网 页 的 切片 处 理 ， 在 Dreamweaver 中 创 
建 布 局 的 站 点 ， 使 用 HTML5+CSS 实现 页 面 的 布局 效果 。 


s VAVBEZE I 


本 草 学 习 重 点 : 


/(— 使 用 Photoshop 分 割 图 片 


(— 布局 前 的 整体 规划 设计 

(^7 使 用 HTML5+CSS 布局 网 站 首页 
/ 7 CSS 的 样式 美化 效果 

/ 7 HTML5 兼容 IE 的 设置 


^ HTML5-*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


网 站 首页 的 布局 设计 


实例 中 的 首页 是 一 个 静态 的 网 页 效果 ， 制 作 首 页 包括 图 片 的 切 制 、 站 点 的 建立 以 及 
HTML5S+CSS 布局 静态 网 页 几 个 环节 。 


Aoc o BuERBUIE 


对 设计 好 的 页 和 面 图 片 要 使 用 Photoshop 进行 分 割 操 作 ， 图 请 分 割 工具 包含 两 个 工具 ， 即 
切片 工具 和 切片 选择 工具 。 

e “切片 工具 ”使 用 它 可 以 方便 地 对 图 片 进行 分 割 |。 

e “切片 选择 工具 ”| 名 通过 它 可 以 方便 地 选取 分 割 好 的 图 片 。 

注意 : 

在 使 用 “切片 工具 ”| 有 时 可 以 按 住 (Ctr1〉 键 快速 切换 到 “切片 选择 工具 ”| 名 

如 果 在 制作 的 时 候 没 有 进行 分 害处 理 ， 浏 览 的 就 是 整个 图 片 ， 打 开 网 页 的 速度 束 会 很 
如。 在 过 到 这 种 问题 的 时 候 通 常 要 将 图 片 进行 分 割 处 理 ， 这 样 在 浏览 图 片 的 时 候 束 会 让 图 片 
部 分 一 部 分 的 出 现 ， 实 现 快速 下 载 。 

男 外 ， 设 计 人 员 应 该 尽量 减少 图 片 的 使 用 ， 因 为 网 页 上 文学 的 浏览 速度 要 比 图 厂 快 得 
多 ， 在 能 够 实现 同样 效果 的 前 提 下 用 文字 代 符 网 卢 将 大 大 提高 网 站 的 浏览 速度 。 关 闭 所 有 的 
输入 文字 图 层 ， 对 于 一 些 特 别 的 标题 图 层 〈 如 Logo 文字 、 新 闻 标 题 等 ) 要 保留 。 

下 面 使 用 “切片 工具 ”| 用 来 分 割 页 面 。 

(Oo 打开 设计 好 的 页 面 ， 先 按 可 视 参 考 线 的 预 放置 分 割 图 ， 操 作 方 法 是 按 下 《Ctrl+R) 
组 合 键 打开 标尺 视 网 ， 用 鼠标 从 标尺 往 下 或 者 往 左 拖 动 即 可 放置 一 个 监 线 ， 如 实例 中 的 放置 
效果 ， 在 放置 的 时 候 尽 量 把 要 切 的 地 方 放 置 到 位 ， 如 这 里 放 切 割 Logo， 单 击 工具 箱 中 的 
“切片 工具 ”| 名， 从 场景 的 左上 角 拉 到 Logo 的 右 下 角 ， 如 图 6-1 所 示 ， 图 中 虚线 框 处 就 是 切 


割 部 分 。 


` 
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图 6-1 Logo 的 切割 


$625 HTML5+CSS 布 局 网 页 


(2) 切割 小 导航 。 保 持 “ 切 片 工具 ”| 区 处 于 选中 状态 ， 从 小 导航 左边 的 背景 开始 分 别 切 
割 出 企业 名 称 、“ 收 藏 本 站 入 “关于 我 们 ”使 用 的 背景 ， 如 图 6-2 所 示 ， 在 进行 样式 布局 的 
时 候 可 以 使 用 设计 的 图 片 背景 ， 但 文字 单独 设计 。 


图 6-2 ”切割 小 导航 


注意 : 
最 好 将 切割 选区 的 下 边框 与 小 导航 的 线条 重合 。 如 果 划 分 切割 区 域 不 够 准确 ， 先 用 放大 
镜 工 具 进 行 放 大 ， 再 选中 分 割 选取 工具 进行 调整 。 
G) 切割 大 导航 。 保 持 “ 切 片 工具 ”| 区 处 于 选中 状态 ， 分 别 切 割 出 网 球 图 片 、“ 公 司 
简介 “网 球 培训 ”等 模块 的 统一 背景 ， 如 图 6-3 所 示 ， 这 里 导航 的 文字 后 面 也 要 用 样 
à CSS 控制 。 


图 6-3 ”切割 大 导航 


(4) 切割 Banner 图 片 。 切 割 出 图 上 厂 ， 以 便于 以 后 的 Flash Banner 操作 ， 如 图 6-4 PZR. 


6-4 切割 Banner 


TML5t*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


f 


(5) 切 制 网 页 内 容 。 在 这 里 要 把 所 有 图 片 控 网 站 的 功能 模块 切割 开 ， 如 图 6-5 Bran. 


图 6-5 切割 网 页 内 容 


(6) 最 后 切割 链接 Logo 和 版 权 说 明 。 保 持 “切片 工具 ”| 又 处 于 选中 状态 ， 在 场景 的 左 
下 角 拖 动 鼠 标 分 出 两 个 矩形 切割 区 域 ， 如 网 6-6 所 示 ， 切 割 后 分 为 21 EIE. 


83.61% 5? 文档 :1.54M/17.2M 


图 6-6 切割 好 的 效果 


(7) 导出 网 页 。 到 这 里 切割 工作 基本 完成 ， 现 在 要 做 的 就 是 把 它 导 出 为 真正 的 网 页 。 选 
择 末 单 栏 上 的 “文件 ”一 “导出 ”一 “存储 为 Web 所 用 格式 ”人 命令， 打开“ 存储 为 Web 所 
用 格式 ”对 话 框 ， 设 置 发 布 后 的 图 片 格式 为 PNG-24 无 损 高 质量 的 图 片 格式 ， 如 图 6-7 所 


示 。 单 击 “ 和 存储” 按钮 打开“ 将 优化 结果 存储 为 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 
index.html， 在 “格式 ”文本 框 中 选择 “HTML 和 图 像 ?”， 单 击 “ 你 存 ” 按 钮 完成 保存 操作 。 
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图 6-7 “存储 为 Web 所 用 格式 ”对 话 框 


(80 打开 保存 文件 的 路 径 ， 可 以 看 到 系统 目 动 生成 了 一 个 名 为 images 的 文件 夹 ， 文 件 
夹 中 是 前 面 分 割 后 产生 的 小 图 片 ， 由 这 些小 图 片 组 成 了 背 页 的 效 来 ， 在 设计 的 时 候 设计 人 人 员 


可 以 分 别 调用 这 些小 图 片 ， 如 图 6-8 Wr. 


O- 计算 机 » AR (D) » book » DIV+CSS » chap04 » images 


XHA ”编辑 (E) SEV) IRM ”帮助 (H) 
组 织 v” ”包含 到 库 中 v — HEY 放映 幻灯 片 
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4, 


IU n 调和 证 网 页 图 片 
如 果 想 让 网 站 的 首页 与 众 不 同 ， 设 计 人 员 还 要 掌握 网 页 颜色 模式 的 使 用 ， 现 在 计算 机 的 


f HTML5+CSS+JavaScript 网 页 布局 从 入 门 到 精通 


应 用 色彩 主要 有 RGB、CMYK 和 数位 色彩 ， 这 些 色彩 模式 的 选择 与 网 站 建设 的 效果 是 息 息 
相关 的 ， 本 节 将 介绍 网 页 色彩 的 优化 与 调节 操作 。 用 户 可 以 在 设置 好 的 文件 中 用 Photoshop 
CC 文件 进行 设计 ， 这 里 调 出 前 面 设计 好 的 首页 效果 来 说 明 如 何 设置 RGB 模式 下 的 图 片 亮 度 
效果 及 色彩 调节 的 操作 。 

(I) 运行 Photoshop CC， 选 择 菜 单 柱 上 的 “文件 ”一 “打开 ”命令 ， 在 “打开 ”对 话 框 
中 选择 设计 好 的 RGB 模式 文件 index.psd， 如 图 6-9 所 示 。 
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图 6-9 选择 要 打开 的 文件 


(2) 日 击 对 话 杠 上 的 “打开 ”按钮 ， 打 开设 计 好 的 网 页 肯 页 平面 效 末 ， 如 图 6-10 
Bra. 
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图 6-10 打开 的 首页 效果 


(3) 在 访 网 页 首页 的 应 用 中 我 们 需要 建立 这 样 一 个 动作 ， 当 鼠标 经 过 大 导航 时 背景 的 秋 
绿色 要 变 成 浅 绿色 ， 这 样 可 以 实现 一 个 动态 效果 。 这 在 Dreamweaver CC F H mira t E 
图 片 的 功能 驶 可 以 实现 ， 但 在 这 里 要 预先 进行 RGB 值 的 调节 ， 让 大 导航 的 背景 亮 起 来 ， 


ces 博取 HTML5+CSS 布 


此 痛 先 要 选择 “大 导航 ”文件 夹 中 的 “导航 背景 ”图 层 ， 如 图 6-11 所 示 。 
(4) ARKAE ER BR” > “WE” > “ERRE” ME, IA “RRR 


LEBE" XIIE, Æ RE” CERERA 40， 在 “对 比 度 ” 文 本 框 中 输入 10， 如 图 6-12 
PESE 
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图 6-11 选择 “导航 背景 ”图 层 图 6-12 ”设置 “亮度 /对 比 度 ”对 话 框 


(5) 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 调 整 后 的 效果 如 图 6-13 所 示 ， 可 以 明显 地 看 出 大 
导航 背景 要 比 原 图 之 一 些 。 在 调 市 好 后 再 切 制 这 些 导航 效果 ， 并 将 这 些小 图 片 男 存 ， 以 方便 
备用 。 
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图 6-13 调节 后 的 效果 


(6) 用 户 在 设计 好 的 色彩 基础 上 可 能 还 会 通过 调节 TE MT TREE, ICRORGA SL A CL 
要 求 ， 这 在 Photoshop CC 中 可 以 用 一 个 命令 快速 实现 。 接 独步 又 (40 的 操作 ， 选 择 亲 
UU “图 像 ” 一 “调整 ”一 “色彩 平衡 ”命令 ， 打 开 “ 色 彩 平衡 ”对 话 框 ， 如 图 6-14 所 

。 在 这 里 可 以 调节 “色彩 平衡 ” 对 话 框 中 不 | 司 的 色 阶 值 以 达到 要 求 ， 也 可 以 拖 动 色 块 按 
人 


"s HTML5-4CSS- JavaScript 网 页 布局 从 入 门 到 精通 、 
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图 6-14 “色彩 平衡 ”对 话 框 
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在 使 用 Dreamweaver CC 2015 进行 网 页 布局 设计 时 ， 首 先 需 要 用 定义 站 点 问 导 定义 站 
点 ， 操 作 步 又 如 下 : 

(1) 打开 Dreamweaver CC 2015， 选 择 亲 单 栏 中 的 “站 点 ”一 “管理 站 点 ”命令 ， 打 开 
“管理 站 点 ”对 话 框 。 

(2) 该 对 话 框 的 上 边 是 站 点 列表 框 ， 显 示 了 所 有 已 经 定义 的 站 点 。 单 击 下 边 的 “新 建站 
点 ” 投 钮 ， 打 开 “ 站 点 设置 对 象 ”对 话 框 ， 进 行 以 下 参数 设置 。 

e "AE: html5。 

e “本 地 站 点 文件 夹 ” DNbookDIV-CSS chap06 . 

如 图 6-15 所 示 。 


m eamweaver 站 点 是 网 9 所 有 文件 和 资源 的 集合 。 
FAES EENEN EEMS IE 
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您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夫 和 名 称 。 
站 点 名 称 : 
本 地 站 点 文件 夹 : 号 


6-15 建立 htmls 站 点 


(3) 单 击 “保存 ”按钮 ， 完 成 站 点 的 定义 设置 ， 在 Dreamweaver CC 2015 "P8 T Wil 
才 设 置 的 站 点 html5。 


62. 使 用 HTML5--C8S 布局 网 页 


Web 使 用 标准 的 HTMLS. JavaScript. CSS 进行 开发 ， 通 过 不 同系 统 的 浏览 器 访问 实现 
跨 平 台 ， 大 部 分 浏览 器 对 HIMLS 都 具有 良好 的 支持 。 


(4 AREAN RI 


对 整体 的 页 面 布局 进行 规划 设计 ， 如 图 6-16 所 示 。 这 张 图 的 初步 规划 是 非常 重要 的 ， 
束 像 畜 一 幢 大 厦 一 样 ， 在 施工 之 前 需要 “绘制 ”好 施工 图 纸 ， 这 样 在 真正 使 用 HTMLS4CSS 
布局 的 时 候 才 能 达到 事半功倍 的 效 琳 。 
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刚 开 始 使 用 HTMLS 时 ， 大 家 可 能 对 一 些 新 标签 不 知道 该 怎么 用 ， 特 别 是 div. section 
和 article 这 3 个 标签 ， 这 里 单独 对 这 些 标 签 做 一 下 介绍 ， 供 大 家 参考 。 

(1) div 

这 个 标签 是 我 们 见得 最 多 、 用 得 最 多 的 一 个 标签 。 本 里 没有 任何 语义 ， 用 作 布 局 以 及 样 


di 


式 化 或 脚本 的 钩子 (hook)。 

(2) section 

与 div 的 无 语义 相对 ， 人 简单 地 说 ，section 就 是 之 有 语义 的 div， 但 大 家 干 万 不 要 以 为 真 
的 这 么 简单 。section 表示 一 段 专题 性 的 内 容 ， 一 般 会 带 有 标题 。 当 元 素 内 容 聚 合 起 来 更 加 
言 之 有 物 时 ， 应 该 使 用 article 来 蔡 换 section. IA, section 应 该 在 什么 时 候 用 呢 ? section 
应 用 的 典型 场景 有 文章 的 章节 、 标 签 对 话 框 中 的 标签 页 、 论 文中 有 编号 的 部 分 。 一 个 网 站 
的 主页 可 以 分 成 和 窗 介 、 新 闻 和 联系 信息 等 部 分 。section 和 下 面 要 介绍 的 article 更 加 适合 于 
模块 化 应 用 。section 不 仅仅 是 一 个 普通 的 容 堪 标签 。 当 一 个 标签 只 是 为 了 样式 化 或 者 方便 
脚本 使 用 时 ， 应 该 使 用 div。 一 般 来 说， 当 元 素 内 容 明 确 地 出 现在 文档 大 纲 中 时 section Wè 
是 适用 的 。 

(3) article 

article 是 一 个 特殊 的 section 标签 ， 它 比 section 具有 更 明确 的 语义 ， 它 代表 一 个 独立 
的 、 完 整 的 相关 内 容 块 。 一 般 来 说 ，article 会 有 标题 部 分 (通常 包含 在 header 内 )， 有 时 也 
会 包含 footer. HX section 也 是 高 有 主题 性 的 一 块 内 容 ， 但 是 无 论 从 结构 上 还 是 内 容 上 来 
说 ，article 本 身 就 是 独立 的 、 完 整 的 。 当 article N HX article 时 ， 从 原则 上 来 说 ， 内 部 的 
article 内 容 是 和 外 层 的 article 内 容 是 相关 的 。 

总 之 div. section, article 的 语义 是 从 无 到 有 ， 逐 渐 增 强 的 。div 无 任何 语义 ， 仅 仅 用 作 
样式 化 或 者 脚本 化 的 钩子 〈hook)。 对 于 一 段 主题 性 的 内 容 ， 则 适合 用 section， 假 如 这 段 内 
容 可 以 脱离 上 下 文 ， 作 为 完整 的 、 独 立 存 在 的 一 段 内 容 ， 则 适合 用 article。 从 原则 上 来 说 ， 
如 果 能 使 用 article， 也 是 可 以 使 用 section 的 ， 但 是 实际 上 ， 假 如 使 用 article EAE, MAn 
不 要 使 用 section» nav 和 aside 的 使 用 也 是 如 此 ， 这 两 个 标签 是 特殊 的 section， 在 使 用 nav 
和 aside 更 合适 的 情况 下 也 不 要 使 用 section. 


7 首页 的 HTMI5 布局 一 


使 用 HTMLS54CSS 布局 首页 的 步骤 如 下 : 
(1) 将 原来 的 index.html 中 的 所 有 代码 删除 ， 将 </head> 以 上 的 代码 优化 为 : 


<!doctype html> 

<html> 

<head> 

«meta charset-"utf- 8" 

<title> 尾 不 体育 </title> 

<link href-"css/css.css" type="text/css" rel="stylesheet"> 


EP 


«script type-"text/Javascript" src-"js/1e.js" ——/script^ 


</head> 


(2) 正文 中 间 的 布局 按 规划 的 “设计 图 纸 ” 一 步 步 完 成 标签 的 输入 。 代 码 如 下 : 
<body> 
<header> 


—M 


«div class-"top logo"^«img src-"images/logo.gif' alt-"logo"/»«/div- 


HTML5+CSS 布 局 网 页 


«div class="top wenzhi"><img src-"images/wenzhi.gif" alt=" 公 司 名 称 "/></div> 
«div class-"top daohan"> 
«nav class-"top box" 
«ul» 
<li class-"top one"><a hre 仁 "加 > 收藏 本 站 </a></i> 
<li class-"top two"><a href="#"> 联 系 我 们 </a></li> 
</ul> 
</nav> 
</div> 
</header> 
«nav 1d="da daohang"> 
«div id="qiu"><img src-"images/qiu.gif" alt=" 球 图 片 "/></div> 
«ul class="da dao" 
<li><a href="#"> ri] fij f /a»—/li 
<li><a hre 伍 "#"> 网 球 培训 </a></li> 
<li><a href="#"> HEEK YI] </a></li> 
<li><a href="#"> f3 H] iia» «li 
<li><a href="#"> 51Jl pa li 
<li><a hre 伍 "#"> 在 线 留言 </a></li> 
<li><a hre 伍 "#"> 招 聘 信息 </a></li> 
<li><a hre 伍 "#"> 明 星 教 练 </a></li> 
</ul> 
</nav> 


«section id="banner"> 


«img src-"images/banner.gif" 
</section> 
<article> 
«div id="left"> 
«section id="news"> 


—M 


«div class-"news r'^«img src 


EA 


images/news.gif"></div> 
«div class-"news 1"> 
</div> 
</section> 
«section id="xinxi"> 
«div class-"xinxi r"7«img src-"images/xinxi.gif'^—/div- 
«div class-"xinxi 1"></div> 
«/section^ 
</div> 
<div 1d="center"> 
«section id="zhaosheng"> 
«div class-"gg tu"><img src-"images/gg tu.gif"></div> 
«div class-"gg tu r'^«img src-"1mages/gg tu r.gif"></div> 
«div class-"gg tu 1"> </div> 
«/section^ 
«section id-"tongzhi" 
«div class-"tz tu"><lmg src-"1images/tz tu.gif"></div> 
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«div class-"tz tu r"^«img src-"images/tz tu l.gif"></div> 
«div class-"tz tu 1"></div> 
«/section^ 
</div> 
<aside id="right"> 
«div class="top_1"><img src="images/top_1.gif"> </div> 
<div class="top_2"><img src="images/top_2.gif"> </div> 
</aside> 
</article> 
«aside 1d="ulnav"> 
«div class="ul_1"><img src="i1mages/url.gif"> </div> 
«div class="ul_2"><img src="images/url_nav.gif"> </div> 
</aside> 
<footer> 
<p>Copyright (c) 2015 itrust.org.cn. All Rights Reserved</p> 
</footer> 
</body> 
</html> 


在 Dreamweaver CC 2015 版 的 编排 软件 中 提供 了 可 视 化 的 操作 ， 如 图 6-17 所 示 。 其 中 
最 新 版 的 软件 加 强 了 索引 的 功能 ， 即 DOM 窗口 ， 编 写 的 HTMLS 标签 像 Word 的 文档 结构 
图 一 样 ， 可 以 方便 地 让 使 用 者 进行 编排 设计 。 
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| 大 小 | 类 型 — [i 
文件 夹 2015/10/21 10: 
LE 文件 夹 2015/10/10 16: 
-BD images zit 2015/10/10 13: 
LL 文件 夹 2015/10/10 18: 
Lm index html 3KB HTML D... 2015/10/21 10: 
index. jpg 329KB JPEG 图 你 2015/10/10 12: 
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34 </ 
35 «section id-"banner 
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DPS CSS 的 样式 美化 


在 站 点 中 建立 css 文件 来， 并 建立 一 个 css.css 样式 文件 ， 对 首页 的 样式 控制 代码 如 下 : 


/* reset 午 置 样式 ， 清 除 浏览 桌 献 认 样 式 ， 并 配置 适合 设计 的 基础 样式 */ 
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,IHi;p,blockquote,pre,hr,figure,table,caption,th,td,form, fields 
et.egend,input,button,textarea,menu ( margin:O;padding:0; ) 
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header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details (display:block;] 

[*iX E HTMLS 标签 所 创建 的 元 素 都 是 用 inline 样式 泻 染 的 ， 使 它们 变 为 块 元 素 */ 

del,ins,u,s,a,a:hover [text-decoration:none; 

/* SSBSBMF53, RIK, ELP PLEKI Unicode 编码 表 网 址 “http://www.divess5.comy/jiqiao/ 
j325.shtml" */ C 
body,textarea,input,button,select,keygen,legend (font: 12px/1.14 arial, \5b8b\4f53';color:#333;0utline:0; } 

a:visited ( text-decoration: none; } 


.clear {clear:both;height: 1px;width:10096; overflow:hidden; margin-top:-1px;} 
/*overflow:hidden 属性 的 作用 是 隐藏 溢出 */ 
JE SESESESER Sk spe E ok oe spese sje ok spe obe oe sje spe e ok se sese oj ak akk e ok ose she ak akk spe akk ok ooo spese e pope sp sje sje spese te 34€ ak oe sk ok sese ak spese akk a€ ak 3k tee / 
Pr TRES 
headerí width:756px; height: 70px;margin:0 auto; } 
top logofwidth:78px; height:70px; float:left; } 
top wenzhi(width:485px; height:70px; float:left;} 
top daohan(width:193px; height: 70px; 
float:left; background:url(../images/xiaodaohan.gif) repeat-x; } 
/*repeat-x J&M MAN MEE header 中 会 横 问 重复 ， 直 到 铺 满 ; repeat-y 是 纵 同 ， 如 果 不 想 重复 
用 no-repeat*/ 
top box{ 
margin-top: l Opx; 
margin-left:20px; 
width:173px; 
j 
top onefwidth:60px; } 
top twoiwidth:60px; } 
ul li ffloat:left;display:inline;) 


POKSEBUS 

#da daohang(íwidth:756px; height: 70px;margin:0 auto; 

Zqiu (width: 1 59px;height:70px;float:left; | 

.da daoíwidth:597px; height:70px; float:left; background:url(../images/dadaohang.gif) repeat-x;} 


.da dao lif margin-top:45px;margin-left:20px;font-size:13px; } 

.da dao li af color:#fff, } 

.da dao li a:hover( color:#000;} 

Zbanner(width:756px;height:201px; margin:O auto; 

IAE XC PILARES 

article (width: 756px; height:257px;margin:0O auto; 

?left(width:374px;float:left; | 

news rí(width:90px;height: 128px;float:left; ) 

.news l[width:284px;height:128px;float:left;background:url(../images/news l.gif) repeat-x;} 
xinxi r(width:90px;height: 129px;float:left; ) 

xinxi 1fwidth:284px;height: 129px;float:left;background:url(../images/xinxi l.gif) repeat-x; } 
Zcenter {width:23 I px;height:257px;float:left; } 

Zzhaosheng {width:23 | px;height:128px;j 

.gg tu(width:231px;height:19px;) 
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.gg tu r(width:75px;height:109px;float:left; | 

.gg tu I (width:156px;height:109px;float:left;background:url(../images/gg di.gif) repeat-x;} 
#tongzhi {width:23 1px;height:129px;} 

.tz tu(width:231px;height:17px;] 

tz tu rfwidth:75px;height:1 12px;float:left; | 

tz tu Itwidth:156px;height:1 12px;float:left;background:url(../images/xinxi di.gif) repeat-x;j 
zright(width:151px;height:257px;float:right; } 

top lí(width:151px;height:65px;j 

top 21width:I151px;height:192px;j 

上 # 友 情 链接 光 / 

#ulnav {width:756px; height:50px;margin:0 auto; } 

ul 1 (width:99px;height:50px;float:left; 

.ul 21width:657px;height:50px;float:left; ) 

P* RALA ES 

footer (width: 756px;height:66px; margin:0 auto; color:Zfff;text-align:center; 
line-height:66px;background:url(../images/bottom.png) repeat-x; } 


Dreamweaver 软件 中 的 编写 界面 如 图 6-18 所 示 。 


Dw XHP S86) SSV) EAM 修改 (M) AO 命令 (QO HSS SOW SRH) 

index.html x 1 AboolADIV«CSSVchapoeNindex- html. 

源 代 码 ŒF iej: n 

i 拆 分 || 设计 | > n 

1 /* reset &mttru AIR ABar AFIO MALDEN eI AEFT 

2 Du ES WCG a MONROE NH M MEE 
th,td,form, fieldset, legend, input,button,textarea,menu[margin:0;padding:0;) 

3  header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,detailsí 

displays Mec XP 

4  [*XUut 创建 的 元 素 都 是 以 inLine 样 式 被 ; 使 他 们 变 为 块 元 素 */ 

5 ner Anaru asarhovr tent- aeii none 

6 /* \5B8B\4F53 宋体 更 多 中 文字 体 转换 Unicode IRURE http: ; .divcss5. html*/ 

7 boðs textarea inputs button ,select pini legend[font: Daf; 14 per "SbabAAf53" er: 


E html5 dE) v 


pst cm 


— ^ 
T 
Ul 


[E] #333;outline:0;} 
9  a:visited[ text-decoration: none;} 
19  .clear[clear:both;height:lpx;width:1009$5; overflow:hidden; margin-top:-lpx;} 
E /*overflow:hidden 这 个 属性 的 作用 是 隐藏 注 出 */ 
11 V ololilkoielokoi ei oieiei oio LLL LLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLL LL LL LL LL LLL LLL 
Y 12 
ei 13 
A 
1 15 7/* 顶 部 */ 
16 neadert Ane ian height: Tepus margin ud auto; } 


= = HUBS, HTML 文档 的 DOM 结 


© G @. 10% x* 183 


6-18 编写 CSS 样式 文件 


D. HTML5 RK E 89i 


IE 6—IE 8 浏览 器 并 不 支持 HTML5 76zÉ«nav^. «header». «footer». «article»4$, o T BU 
mp JB ei, MRE H BU PUR BUD Voas HEAR E EJ CS CET EP) DA TEL a e 2E T FAI RENT e 

如 果 要 让 正 〈 包 括 IE 6) 支持 HTMLS 元 素 ， 我 们 需要 在 HTML 头 部 添加 以 下 
JavaScript， 这 是 一 个 简单 的 document.createElement 声明 ， 利 用 条 件 注释 针对 IE 来 调用 这 个 
JS 文件 。Opera、FireFox 等 其 他 非 TE 浏览 费 束 会 忽视 这 段 代 码 ， 也 不 会 存在 HTTP 请 求 。 

(1) HTMLS 在 默认 情况 下 表现 为 内 联 元 素 ， 对 这 些 元 素 进行 布局 我 们 需要 利用 CSS F 
工 把 它们 转 为 块 状元 素 ， 例 如 : 


p WW Ww F ww S " WW WD OW X 


D Q m Gm e : P c A GQ Gh 
O OOOO o e o 9* O0 OO O 9 


95 N7 NESI \ T 
0199066060606 20625^25-...""".o.ec0600( 6: HTML5+CSS 4p 局 m 四 
国 @g@O@eeee。。  : : eeegg@ 人 全 一 AS 


header, footer, nav, section, article 1 


display:block; 
j 


(2) 创建 一 个 JavaScript 文件 ， 单 独 保存 为 iejs 文件 (如 图 6-19 所 示 )。 编 写 的 代码 如 下 ; 5 


document.createElement("section"); 
document.createElement("article"); 
document.createElement("footer"); 
document.createElement("header"); 
document.createElement("hgroup"); 
document.createElement("nav"); 
document.createElement("menu"); 


document.createElement("aside"); 


上 面 这 段 代 人 码 仅 在 下 A A P T. XI AmE ERAH iejs 文件 必须 
添加 在 页 面 的 head 元 素 内 ， 因 为 TE DU Wise D LEE 76 R DIT B AH 7628, PrEAXX JS XC 
件 不 能 在 页 面 底 部 调用 。 


Dw 文件 S85 SSV) AD 修改 (M) 格式 (0) SAO HAO SOW 帮助 (H) -| EB 

—À Ml iejs x html5 - DAbook^DIV-«CS apo je.js 

I ea Hlas ë 7 
ii Hocument.createElement("section"); 5 PES e 


5Q|Stiütdaec|E 


document.createElement("article"); 
document.createElement("footer"); 
document.createElement ("header"); 
document.createElement("hgroup") ; 
document.createElement ("nav"); 
document.createElement ("menu") ; 
document.createElement ("aside"); 


EPA 

E 2015/10/21 10: 
EHE ess 文件 夹 2015/10/10 16: 
H-B images 文件 来。 2015/10/10 13: 
B js Sit — 2015/10/10 18: 
DOLUS dejs 1KB JScrip... 2015/10/10 16: 
o index html 3KB HTML D... 2015/10/21 10: 
: 329KB JPEG AŞ 2015/10/10 12: 


PE r, 


— 
Im 
p 


(* 0 -O Ui à UN 


index. jpg 


m 
日 期 : 2015/10/10 16:20 


[I« Bo ems m 


6-19 编写 ie.js 兼容 文件 


第 区 4 音 ”电子 商城 首页 布局 


电子 商城 系统 通 秆 拥有 产品 发 布 功能 、 订 单 处 理 功 能 、 购 物 秆 功能、 用 户 注册 和 登录 等 


动态 功能 ， 管 理 者 登录 后 人 台 管 理 即 可 进行 商品 维护 和 订单 处 理 操 作 。 电 子 商城 是 比较 庞大 的 
系统 ， 它 必须 拥有 会 员 系 统 、 碍 询 系统 、 购 物流 程 、 会 员 服 务 等 功能 模块 ， 这 些 模块 在 通过 
用 户 喘 份 的 验证 后 进行 使 用 。 对 于 前 问 布 局 师 而 言 ， 难 点 在 于 各 页 和 面 的 关联 布局 ， 注 意 统 一 
样式 的 应 用 。 本 章 主 要 介绍 使 用 DIV+CSS 进行 网 上 购物 系统 前 台布 局 开发 的 方法 ， 其 中 涉 
及 基础 的 页 面 布局 ， 在 首页 上 使 用 JavaScript 实现 的 一 些 动态 交互 功能 。 


s MA ATTE i5 8 


AÀmm: 


O 大 型 电子 商城 首页 布局 的 规划 
5O 重 置 样式 表 global.css 的 设计 
O 跨 平 台 自 适应 网 页 宽度 

(7 大 导航 和 二 级 菜单 

(c 首页 Banner 图 片 的 轮 播 

O 功能 模块 在 首页 布局 中 的 应 用 


电子 商城 百 页 布局 


EB 电子 商城 系统 规划 


为 了 系统 化 地 学 习 使 用 DIV+CSS+JavaScript 建设 电子 商务 网 站 的 过 程 ， 从 本 章 开 始 以 
模拟 一 个 实用 的 电子 商城 网 站 的 前 端 建设 过 程 为 例 ， 详 细 介 绍 前 端 布 局 一 个 电子 商务 网 站 必 
须 做 的 具体 工作 。 在 进行 大 型 系统 网 站 开发 之 前 首先 要 做 好 开发 前 的 系统 规划 ， 方 便 设 计 员 
进行 整个 网 站 的 开发 与 建设 。 


[站 网 站 整体 布局 规划 


在 制作 网 站 之 前 肯 先 要 把 设计 好 的 网 站 内 容 帮 年 在 本 地 计算 机 的 便 盘 上 ， 为 了 方便 站 点 
的 设计 及 上 传 ， 设 计 好 的 网 页 都 应 存储 在 一 个 目录 下 ， 再 用 合理 的 文件 夹 来 管理 文档 。 在 
本 地 站 点 中 应 该 用 文件 夹 合理 地 构建 文档 的 结构 。 首 先 为 站 扣 创 建 一 个 主要 文件 来 ， 然 后 
在 其 中 创建 多 个 子 文件 来 ， 最 后 将 文档 分 类 存储 到 相应 的 文件 来 下 。 读 者 可 以 加 本 书 的 读 
者 群 进 和 群 空间 下 载 实例 素材 ， 看 一 下 站 点 文档 结构 及 文件 夹 结构 ， 设 计 完 成 的 结构 如 图 7-1 
所 示 。 


E r 修改 日 其 

2015/9/28 11:37 
2015/9/16 15:58 
2015/9/16 15:58 
2015/9/28 11:26 
2015/9/28 11:26 
2015/9/28 11:26 
2015/9/16 16:47 
2015/9/16 16:47 
2015/9/28 11:26 
2015/9/28 11:26 
2015/9/28 11:26 
2015/9/16 16:47 
2015/9/16 16:47 
2015/9/28 11:26 
2015/9/16 16:47 
2015/9/28 11:26 
2015/9/16 16:47 
2015/9/16 16:47 
2015/9/16 16:47 
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图 7-1 网 站 文件 结构 


为 了 方便 程序 员 后 而 工作 的 对 接 ， 一 般 在 布局 的 时 候 先 将 布局 的 第 一 稳 文 件 用 中 文 表 
示 ， 方 便 目 己 和 其 他 工作 人 员 检 碍 和 使 用 ， 名 字 以 本 页 的 实际 功能 来 命名 ， 如 首页 、 注 册 、 
付 亚 等 ， 实 例 中 涉及 动态 网 站 建设 的 几乎 所 有 动态 功能 布局 设计 。 


(EA S xr E SE BS ZI Hh a 


XE SOR A ERTER RUN F: 
(1). BHE "D:" SEP £V. yigou 文件 夹 ， 如 图 7-2 所 示 ， 本 和 章 建 立 的 所 有 布局 文件 都 


O O O o o e € 


"A HTML54CSS-* JavaScript WXsEAASN 


将 放 在 该 文件 夹 中 。 


， 计算 机 、 本 地 磁盘 (D) ， EEE p 
文人 RSO SEV) IAM WE) 
组 织 ” BAF — &àiitR- — RECO AR 新 建文 伯 夫 


| | Ji A mu 


360Downloads aaro qm Program Files 
(x86) 


| 


迅雷 下 载 


yigou 修改 日 期 : 2015/9/28 11:26 
文件 去 


7-2 ”建立 站 点 文件 来 yigou 


(2) 打开 Dreamweaver CC 2015， 选 择 亲 单 栏 中 的 “站 点 ”一 “管理 站 点 ” 
“管理 站 点 ”对 话 框 ， 如 图 7-3 Hr. 


Dw zP #86 坦 看 (V AM 修改 (M) ”格式 (0) ”命令 (C) RS SOW ”帮助 (H) 


11KB HIML Xf: 
20KB HINL 文档 : 
15KB HIML 文档 ， 
SKB HINL 文档 | 


15KB HTML 文档 : 
?TKB HTML 文档 : 
TKB HTML 文档 : 
SKB HTML 文档 ; 
23KB HTML 文档 ; 
TKB HTML 文档 ; 
91KB JScrip... : 
SKB HTML 文档 ; 
13KB HTML 文档 : 
23KB HTML 文档 : 
20KB HTML 文档 : 
TKB HTML 文档 ; 


sh 
nr 


si jsi s st jsi jsi st cd 


g 
2 


13KB HIML 文档 ， 
18KB HIML 文档 : 
20KB HTML 文档 : 


7-3 “管理 站 点 ”对 话 框 


(3) 单 击 “ 新 建站 点 ”按钮 ， 打开 “站 点 设置 对 象 ” 对 话 框 ， 进 行 以 下 参数 设置 。 
“站 点 名 称 ” yigou。 
@“ 木 地 站 点 文件 来 ” Di:yigou\。 

如 图 7-4 所 示 。 


打开 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
站 点 名 称 : 
本 地 站 点 文件 来 : 


7-4 建立 yigou 站 点 


(4) 单 击 列表 框 中 的 “服务 器 ”选项 ， 并 单 击 “ 添 加 服务 器 ”按钮 此 |， 打 开 “ 基 本 ” 
选项 卡 进行 如 图 7-5 所 示 的 参数 设置 。 

e “REAA”: yigou. 

e “连接 方法 ” 本 地 /网 络 。 

e “服务 吉文 件 严 ”，D:yigou。 

€ “Web URL”: http://127.0.0.1/。 


ER 3] 
服务 器 名称: 
iH: 

BSSR: Dya — — — Je 
WebURL: [Ptp2700.y I — — — —] 


7-5 “基本 ”选项 卡 设置 


(5) 单 击 “保存 ”按钮 ， 返 回 “ 服 务 器 ”设置 对 话 框 ， 选 择 “ 测 试 ” 单 选 按钮 ， 如 
图 7-6 所 示 。 

单 击 “ 保 存 ” 按 钮 ， 完 成 站 点 的 定义 设置 ， 然 后 测试 yigou 网 站 环境 设置 。 如 果 用 户 的 
vw ESL EX f use Ar ch K A Aa T] SA A OC TE 3618 In] yigou iie, 
127.0.0.1 默认 地 址 进行 访问 ; 如 果 用 户 的 计算 机 上 没有 装 服务 器 配置 文件 ， 上 述 配 置 的 第 
步 请 不 要 进行 配置 ， 和 直接 配置 到 第 3 步 进行 保存 即 可 ， 当 后 面 布局 页 面 的 时 候 按 (F12) 
预 欠 文件 ， 一 样 可 以 看 到 最 后 的 布局 效果 。 


"P HTML5*CSS-*JavaScript 网 页 布局 从 入 门 到 精通 


您 将 在 此 位 置 选择 承载 web 上 的 页 面 的 服务 器 。 此 对 话 框 的 设置 来 自 
Internet 服务 提供 商 (ISP) 或 Web 管理 员 。 


E: | 地 直 | 和 连接 | 远程 mit | 
yigou D:/yigou dung O © 


保存 时 自动 推送 
在 Dreamweaver 中 保存 的 任何 文件 将 被 自动 推送 到 上 方 列 出 的 出 试 服务 避 。 


注意 :在 保存 文件 时 ， Dreamweaver 会 持 更 改 自 动 推送 到 选 定 的 出 斌 服务 器 。 此 自动 扒 
送 避 在 测试 服务 器 不 是 本 地 Web REOS SETA o 


7-6 WE "Hori 23 


[中 说 向 城 首页 布局 分 析 


类 似 于 京东 商城 的 B2C， 电 子 商 城 实用 型 网 站 是 在 网 络 上 建立 一 个 虚拟 的 购物 商场 ， 让 
访问 者 在 网 上 购物 。 网 上 购物 以 及 网 上 商店 的 出 现 避 免 了 挑选 商品 的 烦琐 过 程 ， 让 人 们 的 购 
物 过 程 变 得 轻松 、 快 捷 、 方 便 ， 很 适合 现代 人 快 节 奏 的 生活 : 同时 又 能 有 效 地 控制 “商场 ” 
运营 的 成 本 ， 开 辟 了 一 个 新 的 销售 渠道 。 本 实例 使 用 DIV+CSS+JavaScript 直接 用 手写 程序 
完成 ， 由 于 完成 的 首页 比较 大 ， 所 以 分 模块 进行 介绍 。 

本 网 站 首页 主要 实现 的 功能 如 下 : 

(1) 开发 了 强大 的 搜索 以 及 高 级 查询 功能 ， 使 访问 者 能 够 快捷 地 找到 感 兴 趣 的 商品 ， 使 
用 三 级 采 单 联动 实现 产品 的 分 类 ， 并 具有 产品 广告 图 片 轮 播 切换 功能 ， 资 讯 话题 和 规则 可 以 
切换 标签 显示 不 同 内 容 的 布局 ， 各 布局 的 功能 分 布 如 图 7-7 所 示 。 


e. 
Go E) DAyigou BEI. html 


欢迎 来 到 批发 市 场 联盟 ! ”请 登录 ”免费 注册 我 的 会 员 中心 v | 进货 单 | 收藏 夫 x | REHAS | 客服 中 心 | 网 站 导航 v ^ 


E i 


购 网 NEM E EE E: Em] 
i 

€ - - Á 2 n T ; é 

] 控 城市 " 2 购物 车 E È 

1TSkill. com ATSE: 1783 Came ES 清 京 节 FA FA SR FA ih ma D 


热门 产业 带 : 热门 热 ] 热 ] d] 热门 £4] £4] 热 ] 热 ] 热门 热门 


AAE 各 NB A NB MESAM 
arawa E e 23997100. 
m 礼品 礼品 See 


> 


77 ”电子 商城 首页 上 的 部 分 布局 效果 


(2) 在 首页 上 加 入 “热门 市 场 ”““ 热 门 区 域 ”“ 求 购 信息 ”“ 实 
— ——— — |l — — € À 


能 ， 布 局 后 如 图 7-8 所 示 。 


实时 订单 ”4 个 


d ”白马 服装 批发 市 场 ” 银 基 服 装 市 场 y 


北京 北京 北京 北京 北京 x 


热门 市 场 东 门 白 服装 市 场 “七浦 路 服装 市 场 北京 北京 北京 


热门 区 域 


北京 ”北京 ”北京 北京 


李 先 生 求购 蓝牙 音箱 数量 : 100 个 
求购 信息 李 先 生 求购 蓝牙 音箱 数量 : 100 个 


7-8 首页 市 场 和 商铺 的 布局 样式 


(3) 流畅 的 会 员 购 物流 程 ， 即 浏览 、 


布局 的 样式 是 一 样 的 ， 如 图 7-9 所 示 。 


DA &) ep 
特价 商品 


包 邮 


火热 进行 中 


童装 批发 直 供 
厂家 直 供 一 手 货 源 BB 


¥ 50.00 X 50.00 


X 50.00 ¥ 50.00 


ESI EEA ES 


产品 标题 产品 标题 产品 标题 ^e EE v 产品 标题 产品 标题 产品 标题 


ev 


产品 标题 产品 标题 产品 标题 Er 产品 标题 产品 标题 产品 标题 产品 标题 产品 标题 产品 标题 


女装 玩具 布艺 家 纺 EVE 茶叶 


ESI 


将 商品 放 入 购物 车 、 去 收银 合 
用 的 购物 车 ， 可 随时 订购 自己 中 意 的 商品 并 结账 完成 购物 。 购 物 的 流程 是 指导 购物 车 系统 各 
序 编写 的 主要 依据 ， 在 首页 上 需要 将 推荐 的 商品 和 品牌 单独 列 模块 进行 展示 ， 实 例 中 这 两 块 


产品 标题 产品 标题 产品 标题 
¥ 50.00 


¥ 50.00 


[E 
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首页 特价 商品 


(40. 按 行 业 划 分 的 产品 目录 导航 功能 ， 如 图 7-10 所 示 ， 在 布局 的 时 候 通 
颜色 的 样式 设置 ， 实 现 了 精美 的 布局 。 


题 按 不 同 的 梓 取 设置， 包括 字 的 大 小 、 


Ú ”地 先生 求购 蓝牙 音箱 数量 : 100 个 


商铺 精 选 


深圳 市 同 丰 电子 商务 有 限 公司 
e IESUS AARRE 
深圳 市 同 丰 电子 商务 有 限 公司 
ERS TAARE 


ends A 
SERS TES 


深圳 市 同 丰 电子 商务 有 限 公司 
SEE TERRE 


深圳 市 同 丰 电 子 商务 有 限 公司 


EERS MERRE 


heH 
品牌 童装 秒杀 进行 时 
íi EESE EELA 


北京 服装 批发 基地 
源头 商 聚 好 货 
品牌 排行 全 部 商品 > 
1 李宁 品牌 
2. 李宁 品牌 


3. 李宁 品牌 


和 品牌 馆 的 布局 样式 


舍 单 的 快速 


每 个 会 员 有 目 己 专 


过 产品 目录 标 


| E) D3yigou BST. html 


Ki HTML5-4CSS- JavaScript 网 页 布局 人 入门 到 精通 


工业 品 so 


MEB fvofon 


桥 一 芳 纱布 EIRE 


扬 品 ] RRR 


化 工 市 场 
WI WI dL (EL dL ÆI HI 
WI KWI I 化 [ I 


化 工 市 场 
WI WI 化 [ XL XL I 化 I 
WI KI I I 化 I 


化 工 市 场 
化 工 WI dL 化 [ I 化 [ 化 I 
wI 化 化 工 kI 化 工 


化 工 市 场 
化 工 WI KI dL KI KI I 
WI WI HI 化 [ 化 


西门 子 品牌 日 半价 GO 


E 化 工 市 场 化 工 市 场 
Erica] 当 季 析 料 辅料 新 品 WI WI KI KI WI GET GI WI WI WI KI KI KI WI 手 快 半价 狠 搞 活动 
BR SERRENT kI KI KI kI GEI 化 I WI 化 工 kI GEI ü 


消费 品 ”进入 


化 工 市 场 
WI WI dL 化工 EL 化 工 I 
wI WI KI dL 化 工 


WI WI I (EL WI I 化工 
WI KWI I kI WI 


化 工 市 场 
WI WI KI 化 化 工 KI I 
4L WI WI 化 工 化 工 


WI KWI I XL KI I 化工 
WI WI I 化 [ WI 


2 化 工 市 场 化 工 市 场 西门 子 品牌 日 半价 GO 
i SR WI WI 化 WI I I 化 I WI WI WI ÆI I 化 [ HI 手 快 半价 狠 搞活 动 
Geo Ee EHE WI KWI I 化 [ I 4L WI WI I dI ° 


首页 产品 目录 分 类 列表 


(5) 最 下 面 的 版 权 页 设计 得 比较 简单 ， 把 平台 的 相关 服务 和 提供 的 保障 整 章 地 展示 出 
来 ， 所 有 权 也 是 按 标 准 格 式 进行 布局 的 ， 如 图 7-11 Bran. 


一 —— -— —— 


图 7-10 


- 
G , 
«6G [E] DAyigou BEL html 
扬 品 ] 当 季 棉 料 辅料 新 品 


BERE s. € 


化 工 市 场 
WI WI WI 化 [ 化 工 化 工 HI 


化 工 
A oum zpra KI 化工 WI KI KI 化 IT 化 I 
HI I KI KI Gel 


WI WI ÆI 化 [ ÆI 


化 工 市 场 化 工 市 场 
WI WI ÆI ÆI EL I 化 I WI 化 [ WI 化 [ I 化 [ kI 
WI KI I I 化 I WI WI KI KI I 


AR SERRENT — 
Big 当 手 棕 料 辅料 新 唱 IET KI KI KI KI KI 化 I WI KI KI KI KI KI HI 

MAR SFEREN KI KI KI XI WI KI WI KI XI GEI : 

采购 商 服务 采购 商 服 务 采购 商 服务 采购 商 服务 采购 商 服务 

注册 新 用 户 注册 新 用 户 注册 新 用 户 注册 新 用 户 注册 新 用 户 

—— — 安装 E 安装 

买 家 入 门 买 家 入 门 买 家 入 门 买 家 入 门 FRAN 

卖家 入 门 ERAJ ERAJ EEAD ERAT 买 家 保障 

© 2015 环 博文 化 版 权 所 有 京 ICP 备 15025146 号 -1 | 京 公 网 安 备 110108003464 号 京 ICP 证 100626 

本 站 内 容 系 用 户 自行 发 布 ， 其 真实 性 、 合 法 性 由 发 布 人 负责 ，17skilLcom 不 提供 任何 保证 ， 亦 不 承担 任何 法 律 卖 任 v 


—] 


E 7-11 底部 版权 页 的 布局 


首页 布局 基础 功能 


对 于 一 个 电子 商城 系统 来 说 ， 需 要 一 个 主页 面 给 用 户 进 行 注册 、 搜 索 需 要 订购 的 商品 、 在 
网 上 浏览 商品 等 操作 。 实 例 首页 布局 主要 由 global.css、index.css、jquery.1.8.2.min.js、slides.js、 
common.js、index.js J£ 6 个 页 面 组 合 而 成 ， 本 节 介 绍 这 6 个 页 面 的 设计 布局 组 合 而 成 的 首页 ， 
在 进行 实例 学 习 的 时 候 我 们 按 首 页 从 上 到 下 的 实际 布局 顺序 来 介绍 布局 的 实现 方法 。 


(AL EAIA R global.css 


由 于 现在 浏览 亏 的 产品 特别 多 ， 而 且 每 种 产品 又 有 很 多 不 同时 期 的 版 本 ， 如 IET. IES. 
IE9 等 ， 这 对 于 前 冰 布 局 师 而 言 是 非常 不 便 的 ， 需 要 考 夸 兼容 性 问题 ， 往 往 布局 符合 了 其 中 
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的 一 于 浏览 如 ， 而 在 其 他 浏览 右 中 整 发 生 了 错位 。 针 对 这 个 问题 ， 一 般 避 级 的 前 病 布 局 师 会 

重 置 样式 ， 即 清除 所 有 浏览 右上 默认 样式 ， 并 配置 适合 设计 的 基础 样式 。 这 也 是 从 压 层 解决 莱 

容 性 的 办 法 之 一 ， 当 然 这 个 代码 也 是 通用 于 所 有 网 站 的 。 本 功能 代码 直接 放 在 global.css X 

iu > 
(1) 运行 Dreamweaver CC 2015 软件 ， 打 开 制 作 到 这 一 步骤 的 站 点 文件 严 。 选 择 来 单 栏 

中 的 “文件 ”一 “新 建 ” 人 命令， 打开“ 新 建文 要 ”对 话 框 ， 在 “新 建文 要 ”选项 卡 中 选择 

“文档 类 型 ”列表 框 中 的 CSS， 然 后 单 击 “ 创 建 ” 按 钮 创建 新 页 面 ， 如 图 7-12 所 示 ， 在 网 站 

css 目录 下 新 建 一 个 名 为 global.css 的 网 页 并 保存 。 


文档 类 型 : 布局 
= HINL 
[Da — uc €: 
- LESS 
启动 器 模板 T Sass 
= SCSS Gua 
x -= JavaScript 
| 网 站 模板 "XS Json 
" - PHP 
- XML 
- SVG 
ET 
- ne 模板 Ems Css) 文档 
= Ak ( 昌 版 ) 
a 
| 
ET ET 


图 7-12 创建 css 文件 


(2) 进入 代码 视 风 和 窗口， 将 里 面 押 有 的 默认 代码 删除 ， 然 后 加 入 以 下 代码 ; 


(QCHARSET "UTF-8"; 
/* reset EEIE BT ERPUH DUE FEN, IFA a Beth AEE C87 


* BiiEHLP? BENE RME ISI UL BUSES, EHAA H UB E SUCI 
html ( color:666; -webkit-text-size-adjust: 10096; -ms-text-size-adjust: 100%; } 


入 内 、 外 边 距 通 名 让 各 个 浏览 器 样式 的 表现 位 置 不 同 */ 
body,div,dl,dt,dd,ul,ol,I,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td 
.hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe( margin:0; 
padding:0;j 


/* 设置 网 页 的 文字 大 小 和 字体 样式 */ 
body,button,input,select,textarea( font:12px arial,"Microsoft YaHei"j 


/* DEXCROURJEASUKSCZR font 的 问题 * 


input,select,textarea ( font-size: 10096; 


"s HTML54CSS- JavaScript CELITNBELTI. 


/* Xd table cell 的 边 距 并 让 其 边 重 合 */ 


table ( border-collapse:collapse; border-spacing:0;) 


/* [E bug fixed: th 不 继承 text-align*/ 
thí text-align:inherit; } 


上 去 除 默 认 边 框 */ 
fieldset,img ( border:0;} 


/* ie6 7 8(q) bug 显示 为 行内 表现 */ 
iframe { display:block; } 


input::-webkit-input-placeholder{color:#b1b1b1; font-weight:bold;} 
input::-moz-input-placeholder{color:#b1b1b1; font-weight:bold;} 


/* 去 掉 FireFox 下 此 元 素 的 边框 */ 


abbracronym{f border:0; font-variant:normal; } 


F* 一 致 的 del 样式 */ 
del{ text-decoration:line-througph;} 
address,caption,cite,code,dfn,em,1,th,var{ font-style:normal; font-weight:500; 


/* 去 掉 列 表 前 的 标识 ，1 会 继承 */ 


ol,ul ( list-style:none;} 


/* 对 齐 是 排版 最 重要 的 因素 ， 不 要 让 什么 都 届 中 */ 
caption,th { text-align:left;) 


/* 来 目 Yahoo， 让 标题 都 目 定 义 ， 适 应 多 个 系统 应 用 */ 
h1,h2,h3,h4,h5,h6 | font-size:100%; font-weight:500; 
q:before,q:after( content:";) 


/* 统一 上 标 和 下 标 */ 

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 
sup (top: -0.5em;j 

sub (bottom: -0.25em;j 


/# 默认 不 显示 下 划 线 ， 保 持 页 面 简洁 */ 
ins,a( text-decoration:none;] 


button border:0; outline:none;j 


/* HTMLS 媒体 文件 跟 img 保持 一 致 */ 


audio,canvas,video { display: inline-block;*display: inline;*zoom: 1; } 


/* 清理 浮动 */ 
.Clear{ clear:both; } 
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.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} 
.clearfix { zoom: 1;} 
.f l{float:left} 


.f r(floatright 
nt { Mae i C 
.位 { float:right; } 
a(text-decoration:none; color:£666; 
说 明 : 
在 CSS 中 可 以 使 用 /**/ 注 释 ， 在 编写 CSS 样式 的 时 候 一 定 要 养 成 良好 的 习惯 ， 对 每 一 段 
样式 代码 实现 的 功能 尽 可 能 进行 注释 ， 以 方便 自己 和 其 他 工作 人 员 读 取 使 用 . 
通过 上 面 重 置 样式 文件 的 建立 可 以 将 整个 网 站 的 基础 样式 统一 ， 起 到 美化 整个 网 站 的 效 
东 ， 并 同时 解决 了 大 部 分 浏览 亏 的 兼容 问题 ， 用 户 在 设计 其 他 网 页 的 时 候 可 以 将 本 文件 作为 
重 章 的 基础 文件 。 


中 平台 目 庆 应 网 页 宽度 


随 看 移动 互联 网 的 普及 ， 越 来 越 多 的 人 使 用 手机 上 网 ， 移 动 设备 正 超过 加 和 面 设备 成 为 访 
问 互 联网 最 第 见 的 终端 。 于 是 ， 网 页 设计 师 不 得 不 面 对 一 个 难题 ， 如 何 才 能 在 不 同 大 小 的 设 
备 ( 包 括 PC、 平 板 手 机 、 智 能 手机 等 ) 上 呈现 同样 的 网 页 效果 ?在 2010 年 ，Ethan Marcotte 
提出 了 “ 目 适 应 网 页 设计 〈Responsive Web Design)” 这 个 名 词 ， 这 是 指 可 以 目 动 识别 屏 佑 和 宽 
度 并 做 出 相应 调整 的 网 页 设计 。 

那么 目 适应 网 页 设计 到 底 是 怎么 做 到 的 ?其 实 并 不 难 ， 首 先 在 网 页 代码 的 头 部 加 入 一 行 
viewport 元 标签 。 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content-"IE-edge,chrome-1"» 
«title» Ff W </title> 
<meta name="description" content=""> 


<meta name="viewport" content="width=device-width; initial-scale=1.0"> 


viewport 3 P R SAU B) EREM E, EXT PSI x RAE Id vx 98 EAN SE T BER a 
(width=device-width)， 原 始 缩放 比例 Cinitial-scale-1) 为 1.0， 即 网 页 初始 大 小 占 屏幕 面积 的 
100%。 所 有 主 沉 浏 吃 右 都 文 持 这 个 设置 ， 包 括 IE9。 

对 于 老式 的 浏览 颖 (主要 是 IE6、IE7、IE8)， 需 要 使 用 css3-mediaqueries.js。 


<!--[if It IE 9]> 

«script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> 
</script> 

<![endif]--> 


"d 


HTML5*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


[中 下， 链 接 样 了 式 表 和 Javascript 


首页 的 样式 表 和 实现 交互 的 JavaScript 是 单独 建立 的 样式 文件 和 区 互动 作文 件 ， 在 首页 
应 用 的 时 候 需要 链接 和 导入 ， 共 体 的 代码 和 功能 如 下 : 


<link href-"css/global.css" type="text/css" rel="stylesheet" 入 <!-- 链 接 通 用 样式 表 global.css--> 

<link href-"css/index.css" type="text/css" rel="stylesheet" /><!-- 链 接 首 页 编写 的 样式 index.css--> 
«script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script><!-- 调 用 jquery 类 库 实现 网 页 的 交互 --> 
«script type="text/javascript" src="js/slides.js"></script><!-- 调 用 图 片 轮 播 --> 

«script type-"text/javascript" src="js/common.js"></script><!-- 调 用 目 己 编写 的 交互 通用 的 JavaScript 


» 


动作 --> 
«script type-"text/javascript" src="js/index.js"></script><!-- 调 用 自己 编写 的 首页 有 交互 的 JavaScript 
动作 --> 

技术 说 明 : 


通过 调用 jquery.1.8.2.min.js 类 库 可 以 实现 很 多 jQuery 的 特效 ， 调 用 的 文件 有 jquery.js 和 
jquery-1.8.2.min.js 两 个 jQuery 的 类 库 ，jQuery 的 min 版 和 原版 的 功能 是 一 样 的 ，min 版 主要 
应 用 于 已 经 开发 成 的 网 页 中 ， 非 min 版 的 文件 比较 大 ， 里 面 有 整洁 的 代码 书写 规范 和 注释 ， 
主要 应 用 于 脚本 开发 过 程 中 。 
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任何 网 站 如 果 想 看 上 去 美观 都 要 经 过 专业 的 网 页 布局 设计 ， 实 例 按 传 统 的 电子 商务 网 站 
布局 方式 进行 布局 ， 文 字样 式 的 美化 设计 是 使 用 样式 表 和 直接 设计 的 ， 实 例 的 通用 样式 表 保 存 
在 global.css 文件 中 ， 个 性 化 的 样式 表 写 在 index.css 文件 里 。 

导航 频道 是 网 站 建设 中 很 重要 的 部 分 ， 通 第 情况 下 一 个 网 站 的 页 面 会 有 儿 十 个 ， 更 大 型 
的 可 能 会 达到 几 千 个 甚至 几 万 个 ， 每 个 页 面 都 有 导航 栏 。 但 是 ， 在 网 站 后 期 维护 或 者 需要 更 
改 的 时 候 ， 这 个 工作 量 会 变 得 很 大 。 为 了 方便 通常 把 导航 栏 开 发 成 单独 的 一 个 页 面 ， 然 后 让 
每 个 页 面 单 独 调用 它 。 这 样 当 需要 变更 的 时 候 上 只 要 修改 导航 栏 这 一 个 页 面 ， 其 他 的 页 面 残 目 
动 全 部 更 新 了 。 实 例 创 建 的 最 顶部 的 小 导航 栏 如 图 7-13 所 示 。 


欢迎 未 到 批发 市 场 联盟 ! este 我 的 会 员 中 心 ”进货 单 ”| 收藏 夫 v | 我 是 供应 商 。 | 客服 中 心 * | 网 站 导航 ~ 
入 家 SUE VES 
产品 市 场 求购 商铺 资讯 等 待 卖家 发 货 E 

R anana raa [m] 

27 M po] 北京 [= € — rag 2 : 

Ein g 二 . 
17S kill. com UTEB Cu “家电 Sa Fa Te o: 买 家 s-a [a]? 

等 待 志 家 发 货 


图 7-13 “小 导航 功能 


制作 步 又 如 下 : 
(1) 在 Dreamweaver CC 2015 Pii “ERRER” Lte 按钮 ， 进 入 代码 视图 窗 
口 ， 和 输入 小 导航 的 DIV 布局 程序 。 


«div class-"head box"> 


电子 商城 百 页 布局 


«div class-"head top clearfix"> 
«div class-"head top ] > 
<p> 欢 迎 来 到 批发 市 场 联 盟 ! </p> 
«a hre 仁 "登录 .html" class="login"> 请 登录 </a> 
«a hre 伍 "注册 .html" class='"regis"> 免 费 注 册 </a> 
</div> 


«ul class-"head top T > 


<li class-"j list" 
<a href="#" class-"top name"> 我 的 会 员 中 心 </a> 
<i class="arrow"></1> 
«div class-"down userj down" style="display:none;"> 
«dl class="bt"> 
<dt> 买 家 </dt> 


<dd><a hre 舍 '"#> 等 竺 卖家 发 货 </a></dd> 
<dd><a hre 传 "#> 等 竺 卖家 发 货 </a></dd> 
</dl> 

<dl> 

<dt> KX «/dt» 

<dd><a href="#"> RE SEACE ft </a></dd> 
<dd><a href="#"> AFRA fila-/dd» 
</dl> 

</div> 

</li> 


<li class-"j list" 
«a href="#" class-"top name"> 进 货 单 </a> 
«i class="arrow"></1> 
«div class="down orderj down" style="display:none;"> 
«div class-"on"- 
«p class="tit"> 最 近 加 入 的 货品 : </p> 
«div class-"info clearfix"> 
«a class-"pro pic" href="#"><img src-"img/picl.jpg" ></a> 
«div class-"cen"- 
«a hre 伟 "如 > 欧洲 站 2014 春 </a> 
<p> 颜 色 : 花色 KIB: S</p> 
<p> 价 格 : < 这 38.00</ 这 元 义 10</p> 


</div> 

<a href-"javascript:;" class="del"> 删 除 </a> 
</div> 

«a href-"7" class-"look order" ></a> 
</div> 


«div class="off"'> 

<p> 您 的 购物 车 还 没有 货品 ， 赶 坚 选 购 吧 ! </p> 
</div> 

</div> 

</li> 


<li class-"j list" 
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<a href="#" class="top name"> 收 藏 夹 </a> 
«i class-"arrow"»«/1- 
«div class-"down mark j down" style="display: none;"> 
«a hre 伍 "#"> 收 藏 商品 </a> 
«a hre 伍 "#"> 收 藏 商品 </a> 
«a href="#"> R m </a> 
</div> 
</li> 
<li> 
«a href="#" class="top name"> 我 是 供应 商 </a> 
</li> 
<li class-"j list" 
«a href="#" class-"top name'"> 客 服 中 心 </a> 
«i class="arrow"></1> 
«div class-"down sev j down" style="display: none;"> 
«a href-" >F HJ rua 
«a href="#"> TE XUI] a 
«a href='#"> 在 线 客服 </a> 
</div> 


</li> 


<li class="last_1j_list"> 

<a href="#" class="top name'"> 网 站 导航 </a> 

«i class-"arrow"»«/1- 

«div class-"down navj down" style="display: none;"> 
«dl class-"clearfix"» 
<d> Xt il«/dt- 
«dd class-"f 1"><a href="#"> RIRA F </a></dd> 
«dd class="f r"><a hre 全 "加 > 市 场 资讯 </a></dd> 


</dl> 
«dl class="clearfix"> 
<dt> ZEX <dt> 


«dd class="f 1"><a href="#"> ZKR </a></dd> 
«dd class="f r"><a href="#'"> 商 家 认证 </a></dd> 
«dd class="f 1"><a hre 伍 "#"> 工 商 打 假 </a></dd> 
</dl> 
«dl class-"clearfix bt"> 
«dt 5 B/j«/dt^ 
«dd class-"f 1"><a hre 伍 "#"> 帮 助 中 心 </a></dd> 
</dl> 
</div> 
</li> 
</ul> 

</div> 


</div> 


在 布局 过 程 中 的 主要 技术 难点 在 于 对 一 些 层 的 隐藏 设置 ， 即 “我 的 会 员 中 心 ”“ 进货 单 ” 
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"Mc" SE Zh act e. MR — 2 ERR INII Be ERIAREN TEH] “style="display: 
none;" ”命令 实现 。 如 果 在 样式 文件 或 页 面 文件 代码 中 直接 用 display:none XJ 628 3EfT T Eo 
藏 ， 载 入 页 面 后 ， 在 没有 通过 JS REFAIRE e PEH JS 代 人 码 无 法 正确 获得 该 
元 素 的 一 些 属性 ， 例 如 offSetTop、offSetLeft 等 ， 返 回 的 值 会 为 0， 通 过 JS 设置 style.display C 
使 元 素 显示 后 才能 正确 地 获得 这 些 值 。 

(2) 在 globalcss 文件 中 输入 该 布局 的 样式 控制 命令 。 


a- t 

.Wrap (width:990px; margin:0 auto; ) 

.head box{ width:100%; height:30px; background:2f21212; } 

.head topí width:1188px; line-height: 30px; margin:O auto; | 

.head top lL.head top 1p,.head top la(float: left;color:666;] 

.head top 1 .login(color:zZb5b5b5;margin:0 14px 0 10px;} 

.head top r,ihead search float:right;) 

.head top r li{float:left;padding:0 18px 0 11px; background:url(../img/header.jpg) right 9px no-repeat; 
position:relative; | 


.head top r li .arrow{ width:7px; height:4px; overflow:hidden; position:absolute; top:13px; right:9px; 
background:url(../img/index/index icon.png) -20px Opx no-repeat; } 

.head top rli.arrow on{  background:url(../img/index/index icon.png) -30px Opx no-repeat; | 

.head top r .last l{padding:0 18px 0 1 1px; background: none; 

.head top r a{color:#666;} 


在 实例 中 使 用 到 了 position:absolute 样式 ， 主 要 用 于 定位 元 素 位 置 ， 那 么 absolute 和 
relative RAKIT, BAHE? 大 家 都 知道 absolute 是 绝对 定位 ，relative 是 相对 定位 。 

absolute， 在 CSS 中 的 写法 是 position:absolute， 和 意思 是 绝对 定位 ， 指 参照 浏览 器 的 左上 
角 配 合 Top、Right、Bottom、Left〈 下 面 简 称 TRBL) 进行 定位 ， 在 没有 设 定 TRBL IT, ZA 
认 依 据 父 级 的 坐标 原始 点 为 原始 点 。 如 果 设 定 TRBL， 并 且 父 级 没有 设 定 position JRE, HE 
么 当前 的 absolute 则 以 浏览 器 的 左上 角 为 原始 点 进行 定位 ， 位 置 将 由 TRBL wE. RK 
讲 ， 网 页 居中 用 absolute 很 容易 出 错 ， 因 为 网 页 一 直 是 随 看 分 辨 率 的 大 小 目 动 适应 的 ， 而 
absolute 则 会 以 浏览 器 的 左上 角 为 原始 点 ， 不 会 因为 分 辩 率 的 变化 而 变化 位 置 。 很 多 人 出 错 
就 出 在 这 点 上 上。 而 网 页 居 左 ， 其 特性 与 relative 很 相似 ， 但 还 是 有 本 质 的 区 别 的 。 

relative, TE CSS 中 的 写法 是 position:relative， 意 思 是 绝对 相对 定位 ， 指 参照 父 级 的 原始 
点 为 原始 点 ， 夺 无 父 级 则 以 BODY 的 原始 点 为 原始 点 ， 配 合 TRBL 进行 定位 ， 当 父 级 内 有 
padding 等 CSS 属性 时 ， 当 前 级 的 原始 点 参照 父 级 内 容 区 的 原始 点 进行 定位 。 

(3) 加 入 CSS 样式 代码 后 ， 束 会 友 现 在 编辑 文档 窗口 中 基本 上 已 经 布局 人 到位， 但 羽 标 
经 过 的 动作 需要 使 用 JavaScript 命令 其 体 实 现 ， 实 现 后 的 效果 如 图 7-14 所 示 。 


我 的 会 员 中 心 Y | 进货 单 x 收藏 夫 v | 我 是 供应 商 


最 近 加 入 的 货品 : 


| LE pxUNS52014x 
fA m 9 
和 Ue 花色 尺码 : S BE b 
B — 价格 : 33.00 元 x10 


图 7-14 自动 生成 代码 占 位 符 


"s HTML54CSS- JavaScript CELITNBELTI. 


在 common.js 文件 中 输入 DIV 实现 下 拉 亲 单 的 JS 命令 : 


/获取 光标 
$(.search text,j input").focus(function() { 
$(this).addClass( focus"); 
$(this).val("); 
DD 


$(.search text,.] input).blur(function()( 
S(this).removeClass(' focus"); 
S(this).val(S(this).attr('prompt"); 
D 


//headertop, F FYE 

$(.head top rj list").hover(function(){ 
$(this).addClass('active"); 
S(this).find(.j down').show(); 

} function() 1 
$(this).find(.j down^.hide(); 
$(.head top r li).removeClass('active"); 


D 
保存 制作 的 页 面 ， 按 下 (F12) 键 即 可 在 浏览 右 中 看 到 制作 好 的 小 导航 效果 。 


[已 民居 和 搜 系 功能 的 布局 设计 


通 单 网 站 都 会 设计 搜索 引擎 功能 ， 站 内 搜索 功能 开发 是 将 得 询 文本 框 放 置 到 一 个 表单 
内 ， 在 单 击 “搜索 ”按钮 时 提 区 到 后 台 动 态 页 面 进行 搜索 并 显示 结 朱 页 向 。 在 布局 的 时 候 主 
要 考虑 使 用 样式 表 实 现 对 表单 的 样式 控制 。 本 实例 制作 的 样式 如 图 7-15 所 示 。 


北京 


Hiski 


电脑 ”家电 。 VE: NE: FË FË 


图 7-15 自动 生成 代码 占 位 符 
CI) 在 index.html 中 使 用 DIV Agel Pr: 


LM 


«div class-"search mr" 


LM 


«ul class-"search type" 

<li><a href="#" class="on"> 产 上 品 </a></li> 
<li><a hre 伍 "#"> 市 场 </a></li> 

<li><a hre 伍 "#"> 求 购 </a></li> 

<li><a href="#"> ri «/a»«/li» 


<li><a href="#"> i«/a»«/li» 
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</ul> 


«form method="post" action="#"> 


<div class="clearfix"> 

<input type="text" class-"inputtj input" value=" 输 入 产品 " prompt- "Ai AJ m" /> 

«button type="submit" class="submit"></button> C 
</div> 

</form> 


«dl class="hot"> 

<d> HE: «dc 

«dd»«a href="#">177 靓 号 </a></dd> 
<dd><a href="#"> Fx E fii </a></dd> 
<dd><a hre 伍 "#"> 家 电 </a></dd> 
<dd><a hre 伍 "#"> 清 闵 节 </a></dd> 
<dd><a href="#'"> 零 食 </a></dd> 
<dd><a href="#"> 零 食 </a></dd> 
<dd><a href="#"> 零 食 </a></dd> 
<dd><a href="#">% QR</a></dd> 
</dl> 


</div> 


form 表单 区 域 标签 的 语法 与 结构 如 下 : 


<form action="" method="get"> </form> 


<form action="" method="post"> </form> 


当 method 的 值 为 get 时 是 通过 URL 传输 内 容 与 参数 ， 这 个 时 候 通 过 网 址 URL. 能 看 见 目 
己 填写 的 内 容 提 交 人 处理 。 

当 method 的 值 为 post 时 是 通过 类 似 缓存 传输 十 与 内 容 与 参数 ， 而 URL. 是 不 能 看 到 
form 表单 填写 内 容 、 提 交 内 容 的 。 

对 于 HTML 表单 form 标签 ， 有 了 form 表单 及 提交 方式 (get post) 才能 将 数据 传输 给 
程序 处 理 ， 和 否则 程序 接收 不 到 将 要 处 理 的 数据 。 

(2) 样式 表 的 控制 放 在 index.css 文件 中 ， 有 具体 的 代码 如 下 : 


/* header */ 
.Sheader{ width:1190px; height: 136px; margin: 0 auto; overflow:hidden; } 


.Sheader .mr{ margin:25px 0 24px 0; | 

.sheader .logo{ float:left; width:280px; height:87px; overflow:hidden; } 

.sheader .logo img vertical-align:middle; — ) 

.Sheader .city { float:left; width:83px; padding-top:l3px; j 

.sheader .clty p{ line-height:24px;font-size:20px; color:#231f20;} 

.Sheader .city aí display: block;width:55px; height:l8px; border:1px solid #cfcfcf, text-align:center; 
color:2999; line-height: 1 8px; } 

.sheader .search (width:512px; height:87px; overflow:hidden; float:left; | 

.sheader .search .search type{ margin-bottom:3px; | 

.sheader .search .search type li{ float:left; padding-right:5px; margin-right:5px;  line-height:24px; } 
.Sheader .search .search type li a{ color:000; } 


HTML5*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


.Sheader .search .search type li a:hover,.sheader .search .search type li a.on{ color:#e12228; | 

.Sheader .search  .inputt(width:440px;  color:7999; float:left; height:24px; line-height:24px; 
padding:2px 5px 3px 5px; border:3px solid 7e12228; background:none; } 

.Sheader .search .submit (width:47px; cursor:pointer; height:35px; background:url(../img/icon-bg.png) no- 
repeat 0 -SOpx; float:left;) 

.sheader .search .focus{f color:2000; } 

.sheader .search .hot (line-height:24px; height:24px; width:500px; overflow: hidden; } 

.Sheader .search .hot dt float:left; color:#b6b6b6;} 

.Sheader .search .hot dd float:left; padding-right:5px; margin-right: 10px; display:inline; } 

.Sheader .search .hot dd a{ color:#666;} 

.Sheader .shopp car{ width:84px; color:29e9e9e; height:30px;margin-top:53px; border:1px solid Zeeeeee; 
padding-left:44px; background: ?fafafa; position:relative; float:left; | 

.Sheader .shopp car .num{ width:22px; height:34px; position:absolute; top:-10px; left:9px; background- 

position:-62px -54px; } 

.Sheader .shopp car .num 1{ position:absolute; width:l6px; height:16px; overflow:hidden; top:Opx; 

color:#fff; left:6px; line-height: 16px; text-align:center; } 

.Sheader .shopp car .text{ line-height:32px; display: inline-block; } 

.Sheader .shopp car .icon{ width:6px; height:10px; overflow:hidden; position:absolute; top:llpx; 

left: 1 15px; background-position:-89px -25px; } 

.sheader .app{ margin-top:7px; width:115px; float:right; } 

.Sheader .app .tit{ line-height:30px; height:30px; color:2666; padding-right:14px; text-align:right; } 

S header .app .app bgí display:inline-block; helght:14px; line-height:il4px; padding-top:44px; text- 

align:center; vertical-align:top; line-height:1 4px; width:43px; color:666; background-position:-154px - 

39px; j 

.sheader .app img vertical-align:top; } 


对 表单 输入 文本 框 的 样式 控制 代码 如 下 : 


inputt(width:440px; color:#999; float:left; height:24px; line-height:24px; padding:2px 5px 3px 
5px; border:3px solid 7e12228; background:none; } 


XI TRUE TECELI EE GENI AE F : 


.submit ( width:47px; cursor:pointer; height:35px; background:url(../img/icon-bg.png) no-repeat 0 -50px; 
float:left; } 


EZKIAK BREL ER ab], ARR TUCHLLUS I Sz ZU 328. V 


用 相应 的 


背景 图 片 样式 icon-bg.png。 


应 用 到 了 no-repeat 样式 ， 访 样式 设置 或 检索 对 象 的 背景 图 像 如 何 铺 排 赴 元 ， 必 须 先 指 
定 background-image 属性 。 


repeat-x: 背景 图 像 在 村 同上 平 铺 ; 

repeat-y: B RREA H EPE; 

repeat: To RAER AA T8] EP; 

no-repeat: Bx KAFE; 

round: F RRS E JA PENA HADAA (CSS3)。 

space: Tj EMALJE KIE E FR HATARA ERR EXE 7; e (CSS3). 
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W 大 导航 和 二 级 菜单 


导航 菜单 是 网 站 最 重要 的 组 成 部 分 之 一 ， 利 用 导航 菜单 网 站 才能 向 用 户 提供 有 效 浏览 


站 内 容 的 途径 。 用 户 借助 导航 采 单 能 够 充分 浏览 网 站 的 信息 、 使 用 网 站 的 功能 。 

导航 菜单 动画 大 致 分 为 以 下 几 类 ; 

1. 分 栏 式 菜单 

将 菜单 按 内 容 分 成 若干 栏 ， 水 平 或 者 垂直 地 排列 在 网 页 上 ， 每 一 个 表单 项 相当 于 一 个 按 
Ho Kei LAPRE. 

2. 树 状 菜单 

将 菜单 的 菜单 项 组 成 一 棵 可 以 展开 或 者 折 车 的 树 ， 树 上 的 每 一 个 节点 或 者 叶子 代表 一 个 
染 单 项 ， 沫 单项 下 面 可 以 有 子 沫 单 ， 子 逐 单 也 是 一 棵 树 。 

3. 弹出 式 菜单 

这 是 Windows 操作 系统 中 最 香 见 的 一 种 荣 单 ， 通 过 单 击 鼠标 弹出 一 个 功能 菜单 。 

4. 隐藏 陈 菜 单 

这 类 这 单 在 一 般 情 况 下 是 隐 蕊 鸭 ， 不 会 显示 在 网 页 上 ， 但 是 通过 触发 一 定 的 事件 《例如 
忌 标 经 过 茶 个 区 域 ) 可 以 让 沫 单 显 示 出 来 ， 忌 标 离开 茶 个 区 域 ， 肖 单 又 会 上 自动 隐藏 。 

S. 下 拉 式 菜单 

这 类 菜单 的 每 一 个 菜单 项 都 有 一 个 可 以 下 拉 的 子 菜单 ， 可 以 利用 鼠标 下 拉 出 子 菜单 ， 子 
沫 单 在 鼠标 离开 后 会 目 动 收回 。 

实例 使 用 DIV+CSS+JavaScript 制作 的 请 动 荣 单 属 于 “隐藏 式 来 单 ”， 当 鼠标 经 过 主 荣 单 
时 和 触 友 二 级 玉 单 的 显示 ， 当 鼠标 离开 时 沫 单 目 动 隐藏 。 在 网 站 的 导航 布局 中 经 名 会 遇 到 级 联 
玉音 的 布局 设计 ， 通 党 有 两 种 布局 方式 ， 一 种 是 女 标 经 过 一 级 末日 的 时 候 ， 二 级 末 蛙 显示 在 
一 级 菜单 的 正 下 方 ， 即 竖 排 菜单 ， 如 图 7-16 所 示 。 还 有 一 种 就 是 鼠标 经 过 一 级 菜单 的 时 
候 ， 二 级 菜单 显示 在 一 级 菜单 的 右边 或 者 左边 ， 即 横 排 菜单 ， 效 果 如 图 7-17 所 示 。 


首页 市 场 联盟 ”私人 定制 re 限时 秒杀 社区 


ZW pg B4] — £4] 热 ] 4] £4] 热门 


图 7-16 "Hs 


首页 市 场 联盟 ”私人 定制 ” 尾 货 放血 ”限时 秒杀 ”社区 


iani ” ”女装 女装 

礼品 礼品 礼品 礼品 ,二 

礼品 礼品 礼品 礼品 30 女装 ”女装 ”女装 ”女装 ”女装 女装 ”女装 ”女装 ”女装 ”女装 
女装 ”女装 ”女装 女装 女装 女装 ”女装 ”女装 女装 女装 

消费 品 > 

礼品 礼品 礼品 礼品 礼品 女装 女装 

礼品 礼品 礼品 礼品 礼品 | 
女装 ”女装 ”女装 ”女装 ”女装 女装 ”女装 ”女装 ”女装 ”女装 

消费 品 、| 女装 ink 女装 女装 女装 女装 ”女装 女装 女装 女装 

iB ia da da ia | 

礼品 礼品 礼品 礼品 礼品 女装 女装 


图 7-17 PEK 


"s HTML5-4CSS-* JavaScript BESERASSHE 


(1) 实例 对 这 两 种 菜单 分 别 使 用 DIV+CSS+JavaScript 制作 并 进行 应 用 ， 实 现 的 方法 如 
Fo DIV 横 排 沫 单 布局 代码 如 下 ， 其 中 一 样 的 代码 不 在 书 里 具体 列 出 。 


—M 


«div class-"snav warp" 


LM 


«div class-"snav clearfix"> 


«div class-"snav protype"- 
«div class-"tit" 
<i class-"1con" 7/17 
<p> 全 部 产品 分 类 </p> 
</div> 


LM 


«div class-"snav product" 


«div class=" 
«dl class-"clearfix"- 

«dt»«a href- 4" JH 29 m </a><i class-" down icon"»«/i»«/dt» 
<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

<dd><a hre 伍 "#"> 礼 品 </a></dd> 

</dl> 


«div class-"snav menu" 


snav product box" 


—M 


«ul class-"snav menu UL > 


—M 


<li class-"snav menu li" 

«dl class-"snav menu dl clearfix"> 
<dt><a href="#"> 女 装 </a></dt> 
<dd><a hre 伍 "#"> 女 装 </a></dd> 
<dd><a href="#"> r% </a></dd> 
<dd><a href="#"> Z0 </a></dd> 
</dl> 

</li> 


—M 


<li class-"snav menu li" 


«dl class-"snav menu dl clearfix" 
<dt><a href="#"> 女 装 </a></dt> 
<dd><a hre 伍 "#"> 女 装 </a></dd> 
<dd><a hre 伍 "#"> 女 装 </a></dd> 
<dd><a href="#"> r% </a></dd> 
</dl> 

</li> 


—M 


<li class-"snav menu li" 


«dl class-"snav menu dl clearfix" 
«dt»«a href="#"> 女 装 </a></dt> 
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<dd><a hre 伍 "#"> 女 装 </a></dd> 
<dd><a hre 伍 "#"> 女 装 </a></dd> 
<dd><a hre 伍 "#"> 女 装 </a></dd> 
<dd><a hre 伍 "#"> 女 装 </a></dd> 
</dl> 

</li> 

</ul> 

</div> 

</div> 


(2) 竖 排 的 DIV 布局 代码 如 下 : 


«ul class-"snaw list clearfix"> 
<li class="on"><a href="#"> 页 </a></i> 
<li><a hre 伍 "#'"> 市 场 联盟 </a></li> 
<li><a href="#">% A XE thl|</a></li> 
<li><a href="#"> Fé f: JA fll «/a-«/li» 
<li><a href-"4 [WP ZR ali 
<li><a href- 4" £p «/a»«/li» 
</ul> 
<p class="snav_r"><a href="#"> Mh </a>/<a hre 仁 "加 > 投资 </a></p> 
«div class-"snaw link" 


EA 


«ul class-"clearfix snaw link ul" 
<li><span> 热 门 产 业 珊 :</span></i> 
<li><a href="#">] ]«/a»«/li» 
<li><a href="#"> M] ]J</a></li> 
<li><a href="#">] ]J</a></li> 
<li><a href="#">] ]J</a></li> 
<li><a href="#">] ]J</a></li> 
<li><a href="#">] ]J</a></li> 
<li><a href="#"> M] ]J</a></li> 
<li><a href="#">] ]J</a></li> 
<li><a href="#">] ]J</a></li> 
<li><a href="#">] ]J</a></li> 
<li><a href="#">] ]J</a></li> 


</ul> 
</div> 
</div> 
(3) 使 用 的 样式 控制 代码 写 在 global.css 中 ， 包 括 了 其 他 的 样式 设置 。 
/* header-top */ 


.swrap{ width:1190px; margin:0 auto; } 

head top rlií position:relative; } 

.head top r li.active{ background:Zfff;border:lpx solid £e8e8e8; border-bottom:none; height:29px; 
padding:0 17px 0 10px; } 

.head top r li.active .top name{ color:#d13838;} 


.head top r .active .down user{ border:lpx solid Ze8e8e8;  border-top:none; position:absolute; 
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top:29px; background:#fff, left:0px; width:98px; } 

.head top r.active .down user dl (padding-left: 1 8px; width:82px; padding-top:4px; } 

.head top r.active .down user dl.bt{ border-bottom:1px solid 7e8e8e8; padding-bottom:3px;] 

.head top r.active .down user dt{ line-height:24px; | 

.head top r .active .down usera:link,.head top r.active .down user a:visited (color:2565656; | 

.head top r.active .down user a:hover1color:Zd13838; } 

.head top r.active .down user dd{ line-height:20px; color:2808080; } 

.head top r .active .down order{ width:217px;  padding:3px 0 0 10px; border:lpx solid #e8e8e8; 
border-top:none; position:absolute; top:29px; background:#fff, left-165px; — | 

.head top r.active .down order .tit{ line-height:32px; color:#666;} 

.head top r.active .down order .Info .pro pic{ float:left;padding-right:lOpx; } 

.head top r.active .down order .Info .pro pic img( — width:56px; height:56px; vertical-align:top;) 
.head top r.active .down order .info .cen{ float:left; | 

head top r .active .down order .info .cen af line-height:20px; display: block; height:20px; width:112px; 
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ) 

ead top r .active .down order .info .cen a:link,.head top r .active .down order .info .cen 
a:visited (color:565656; } 

.head top r .active .down order .info .cen a:hoverícolor:d13838; | 

.head top r .active .down order .Info .cen pí line-height:18px; width:l112px; height:18px; overflow: 
hidden; j 

.head top r .active .down order .info .cen p iícolor:e50012;) 

.head top r .active .down order .del{ width:30px; height:56px; line-height:56px; text-align:center; 
color:#0d5cc3; } 

.head top r .active .down order .look order{ width:94px; height:26px; display: block; margin:14px auto 
15px; background-position:O -130px; } 

.head top r .active .down order .on{ } 

.head top r .active .down order .off pí display: none; line-height:30px; padding-bottom:5px; 

.head top r .active .down mark border:lpx solid Ze8e8e8; padding-bottom:5px;  border-top:none; 
position:absolute; top:29px; background:#fff; left:-1px; width:63px; 

.head top r.active .down mark a1 display:block;line-height:20px; text-align:center; } 

.head top r.active .down mark a:link,.head top r .active .down mark a:visited (color:2565656; | 

.head top r.active .down mark a:hover1color:2d13838; | 

.head top r .active .down sev{ border:1px solid Ze8e8e8; padding-bottom:5px; ^ border-top:none; 
position:absolute; top:29px; background:#fff; left:- 1px; width:75px;j 

.head top r .active .down sev a{ display:block;line-height:20px; text-align:center; } 

.head top r.active .down sev a:link,.head top r.active .down mark a:visited (color:565656; | 

.head top r .active .down sev a:hoverícolor:d13838; | 

.head top r .active .down nav{  width:144px; border:1px solid #e8e8e8;  border-top:none; 
position:absolute; top:29px; background:#fff, left:-70px;  } 

.head top r .active .down nav dl{ padding:0 13px;  width:124px; border-bottom:lpx solid #e8e8e8; 
padding-bottom:3px; } 

.head top r .active .down nav dt{ line-height:20px;padding-bottom:3px; color:#565656; | 

.head top r.active .down nav ddf line-height:20px;j 

.head top r.active .down nav dd a{ display:block;line-height:20px; text-align:center; } 

.head top r .active .down nav dd a:link,.head top r.active .down nav dd a:visited (color:Z747474; } 
.head top r .active .down nav dd a:hover(color:zd13838; } 
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.head top r .active .bt{ border-bottom:none; } 

.] down{ z-index: 999; | 

.head top l.change city float:none; margin:0 10px 0 4px; | 

.head top l.user info{ float:left; margin:0 5px; } GO) 


二 级 琳 单 联动 的 样式 代码 写 在 index.css 文件 里 面 。 具 体 的 代码 如 下 : 


/* nav 二 级 沫 单 联 动 */ 

.Snav warp width:10096; height:40px;background:#cc0000; margin-bottom:30px; } 

.snav1 width:1190px; height:40px; margin:0 auto; position:relative; } 

.Snav_ protype( float:left; width:208px; background:#de171b; position:relative; padding-top:5px; margin- 
top:-5px; } 

.Snav_protype .tit{ width:208px; height:40px; } 

.Snav protype .tit p{ padding-left:22px; line-height:40px; color:Zfff;font-size:16px; } 

.Snav_ protype .tit .Icon{f float:right; width:19px; height:l5px; overflow:hidden; margin:l2px 12px 0 
0 ;background-position:-30px -7px; | 

.Snav_ protype .snav productí position:absolute; left:0px; top:40px; width:206px; padding-top:12px; 
border:1px solid Zdel71b;border-top:none; } 

.Snav product .snav product boxíborder:2px solid #fff, ^ cursor:pointer; border-bottom:2px solid 
#f6f6f6; border-right:none; } 

nav product.snav product box dl{ padding:4px 0 9px 12px; } 

.Snav product.snav product on{ border:2px solid Zddd; border-right:none; } 

.Snav product .snav product on dlíposition:relative; background:#fff, margin-right:-2px; padding- 
rght2px; z-index:99999; | 

.Snav_ product .Snav menu( position:absolute; display:none; top:12px; left:204px; 
width:480px;border:2px solid Zddd; background:#fff, z-index: 9999; | 

.Snav product .snav menu .snav menu li{ float:left;  width:220px; padding:0 15px 0 5px; 
background:#fff; } 

.Snav product .snav menu .snav menu dl dt{ line-height36px; font-size:16px; border-bottom:2px 
solid 7f£7f7f7; margin-bottom:5px; 

.Snav product .Snav menu .Snav menu dl dt af color:2333; } 

.Snav product .Snav menu .Snav menu dl dta:hover( color:#ff7324; | 

.Snav product.snav menu.snav menu dl dd af color:2666; | 

.Snav product.snav menu.snav menu dl dd a:hover( color:2ff7324; | 

.Snav product.snav menu .snav menu dl ddf float:left;margin-right: 12px; line-height:22px; | 


.Snav product dt{ line-height:26px; position:relative; font-size: 14px; } 

.Snav_ product dt a{  color:2333333; | 

.Snav product dt .down iconí width:8px; height:4px; overflow:hidden; background-position:0 -2px; 
position:absolute; width:20px; height:26px; right:llpx;top:Opx; } 

.Snav_ product dd float:left;padding-right:5px; margin-right:5px; line-height:20px;j 

.Snav product dd af color: 666; } 

.Snav product dl a:hover,.snav product dl a.on1 color:zff7324; | 

.snaw list{ float:left; height:40px; } 

.snaw list li{ float:left; | 

.snaw list li a{ display:block; padding:0 10px; line-height;40px; color:#fff;font-size:16px; height:40px; 
line-height:40px; — j 
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.snaw list li.on{ background:£a10000; } 

.snav r{float:right; line-height:A0px; color:#fff, font-size:lópx; | 

.Snav r a{ color:#fff, padding:0 10px;j 

.Snaw link{ position:absolute; top:40px; left:210px; height:40px; } 

.Shaw link .snaw link ul{ height:30px; line-height:30px; padding-left:5px; } 
.Shnaw link ul li{ float:left; margin-right:20px; line-height:30px; } 

.Snaw link ulli span{ color:Z777px; | 

.Snaw link ulli aícolor:2333; } 

.Snaw link ul li a:hover( color:zZdel71b; | 


(50 布局 首页 和 定义 样式 之 后 ， 在 首页 中 可 以 看 到 布局 的 荣 单 效 末 ， 但 鼠标 经 过 的 时 候 
并 没有 相应 的 动作 产生 ， 因 此 要 使 用 JavaScript 进行 实现 ， 编 号 的 代码 写 在 index.js 文件 中 。 


S(function() 1 

$(.market city').eq(0).addClass('on^); 

/二 级 菜单 

$(.snav product box^.hover(function() { 
var idx = S$(this).index() + 1; 
$(this).find(.snav menu").ess('top',12*1dx) 
$(this).addClass('snav product on'); 
S(this).find(.snav menu").show(); 

},function(){ 
$(this).removeClass('snav product on") 
S(this).find(.snav menu").hide(); 
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(TE 制作 首页 图 片 的 轮 播 


前 面 介绍 了 页 面 的 布局 设计 ， 接 下 来 我 们 要 在 页 面 中 加 入 图 刻 轮 播 动画 特效 。 本 实例 中 
由 于 涉及 的 网 站 栏目 特别 多 ， 如 末 使 用 一 些 特殊 的 动画 效果 可 以 让 整个 网 页 看 起 来 更 加 简洁 
且 具 有 动感 性 。 本 实例 中 主要 使 用 DIV+CSS+JavaScript 制作 了 一 个 自动 滚动 播放 图 片 的 动 
国 效 来， 动画 在 网 页 中 的 播放 如 网 7-18 所 示 。 


kindle 32952» 

T. I e— 
读 出 趣 享 优惠 
同时 购买 Kindle 和 Levi's 立 减 19 9 元 


8/24 - 9/21 
> 立即 购买 


图 7-18 图片 动 画 轮 播 的 效果 
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网 页 上 的 产品 促销 图 片 是 目 动 切换 的 ， 使 用 JavaScript 脚本 语言 实现 ， 制 作 步 又 如 下 : 

CIO 在 站 点 img/index 文件 夹 里 准备 4 张 一 样 大 小 的 JPG 图 片 ， 并 分 别 命 名 为 picl.jpg、 
pic2.jpg、pic3.jpg 和 pic4.jpg， 所 有 的 图 卢 都 要 在 Photoshop 软件 中 进行 统一 处 理 ， 如 图 7-19 
De 


— - : 
QO-» » 计算 机 本 地 磁盘 (D:) » yigou » img » index » 


€ -e t| Bum... 


pici AE: 2015/9/16 15:58 分 级 : SNL 大 小 : 116 KB 
JPEG 图 像 标记 : 添加 标记 尺寸 : 670 x 240 


7-19 准备 4 张 图 片 


(2) 在 Dreamweaver CC 2015 软件 中 打开 index.html 页 面 ， 找 到 <div class=" sbanner box "> 
层 ， 加 入 层 的 布局 代码 : 


- 


«div class-"sbanner box" 


LM 


«ul class-"clearfix box ul" 
«]r 
«a href="#"><img src-"img/index/picl.jpg" /></a> 
</li> 
«]r 
«a href="#"><img src-"img/index/pic2.]pg" /></a> 
</li> 
<li> 
<a href="#"><img src-"img/index/pic3.jpg" /></a> 
</li> 
<li> 
<a href="#"><img sre="img/index/pic4.jpg" /></a> 
</li> 
</ul> 
«ol class="nav"> 
<li class="on"><a href="#0"></a></li> 
<li><a href="#1"></a></li> 
<li><a href="#2"></a></li> 
<li><a href="#3"></a></li> 
</ol> 
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</div> 


说 明 : 


这 上 段 程序 的 意思 是 将 img/index 文件 夹 中 的 4 张 图 片 以 <DIV> 层 的 形式 放 到 页 面 中 ， 分 
别 定 义 层 的 名 称 ， 定 义 层 的 名 称 是 为 了 JavaScript 脚本 语言 的 调用 。 
(3) 在 index.css 文件 中 进行 对 .sbanner 样式 的 设计 。 上 其 体 代码 如 下 : 


/* banner */ 

.Sbanner( width:670px; height:402px; margin:12px 0 0 223px; float:left; j 

.Sbanner box{  width:670px; height:240px; overflow: hidden; position:relative; } 

.Sbanner box .box ul{ position:absolute;top:Opx; left:0px; height:240px; | 

.Sbanner boxlifwidth:670px;  height:240px; float:left; } 

.Sbanner box li img{width:670px;  height:240px; vertical-align:middle;j 

.Sbanner box .navíposition: absolute; width:72px; height: 13px; bottom:8px; right:20px; z-index:999; | 
.Sbanner box .nav li( width:13px; height: 13px; margin-right:5px; background-position:-105px -25px; | 
.Sbanner box .nav li a{ display: block; — width:13px; height:13px; } 

.Sbanner box .nav li.on{ background-position:-121px -25px; } 

.Sbanner bt{ width:668px; height:159px; padding-top:lpx; border:1px solid £eee;  border-top:none; 
position: relative; } 

.Sbanner bt box{ width:626px; height:159px; margin:0 21px; position:relative; overflow: hidden; } 
.Sbanner bt box ul{ position:absolute; top:Opx; left:0px; } 

.Sbanner bt box ul li{ float:left; width:626px; height:159px; } 

.Sbanner bt box ul li .plc box float:left; width:208px; height:159px; | 

.Sbanner bt box ul li .list{ border-left:1px solid Zeee; border-right:1px solid Zeee; } 

banner bt .prev{ width:l4px; height23px; position:absolute; top:71px; left:10px; background- 
position:-53px 0; | 

.Sbanner bt .next{ width:14px; height:23px; position:absolute; top:71px; rightilOpx; background- 
position:-70px 0; | 

.Sbanner side{ width:283px; height:400px; float:right; margin-top:12px; } 

.Sbanner side .mation( width:281px; height:202px; border:1px solid Zebebeb; } 

.Sbanner side .mation .mation sele{ height:30px; border-bottom:lpx solid Zebebeb; | 

.Sbanner side .mation .mation sele li{ background:Zfafafa;width:139px; height:30px; line-height:30px; 
cursor:pointer; text-align:center; color:#666; float:left; } 

.Sbanner side .mation .mation sele li.br{ border-right:1px solid Zebebeb; } 

.Sbanner side .mation .mation sele li.on{ margin-bottom:-1px; padding-bottom: 1px; background:#fff; | 
.Sbanner side .mation listípadding:12px 0 16px 20px; width:261px; height:142px; } 

.Sbanner side .mation list li{ line-height:24px; } 

.Sbanner side .mation list li a{color:#a9a9a9; | 

.Sbanner side .mation listlia:hover{ color:#f7941d; j 

.Sbanner side .mation listli.colo{ color:#f7941d; } 

.Sbanner side .login{ width:281px; height:105px; position:relative; border:lpx solid #ebebeb; border- 
top:none; background:urk(../img/index/bgs.gif) #fff right top no-repeat; } 

.Sbanner side login pí padding:20px 0 0 21px; line-height: 22px; | 

.Sbanner side .login p 1{ color:2d13838; } 

.Sbanner side .login .login btn{ position:absolute; top:51px; left:28px; width:108px; height:35px; 
background-position:0 -161px; — | 
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.Sbanner side .login .regis btn{ position:absolute; top:5lpx; left:146px; width:l08px; height:35px; 
background-position:0 -201px; } 

.Sbanner side .safety{ width:197px; height:64px; padding: 18px 0 0 84px; border:1px solid Zebebeb; 
margin-top:6px; position:relative; } 

.Sbanner side .safety .tit (font-size: 16px; line-height:24px; color:2666; | > 
.Sbanner side .safety .txt{font-size:12px; line-height:18px; color:#666; | 

.Sbanner side .safety .iconí position:absolute;top:67px; left:0px; width:49px; height:57px; top:l8px; 
left: 18px; background-position:0 -67px; } 


(4) 由 于 具体 实现 动画 的 JavaScript 脚本 语言 太 长 ， 所 以 为 其 单独 写 了 一 段 程 序 ， 保 存 
在 css 文件 夹 的 slides.js 文件 中 。 具 体操 作 如 图 7-20 所 示 。 


ai - x 
Dw XÐ $86 SEV) ÆA BBM) ESO) SAO HASO SOW H) xs -| m lel x J 
首页 html x yigou - D:\yigou\ 首 页 html - - 文件 
源 代 码 global. css index.css jquery.1.8.2.nin.js GEYEBE common. js index.j T 
!CRB] a. xb |- m 本 地 视图 ~] 
i Kfunction(5)1 | x e Sturn | El 
ides = i ; 二 [EE | 
n 2 $.fn.slides = function( option ) 1 [8] E "X : - ES — 
* 3 // 材 盖 味 认 值 与 指定 的 选项 He 站点- pie 0:... 
z 4 option = $.extend( {}, $.fn.slides.option, option ); j -: M 
img 
5 2 
E 6 return this.each(function()1 T "i 
8 7 // 用 幻灯 片 控制 容器 ,BRÜREHROBERIUICEUMR - 
iM 8 $('.' + option.container, $(this)).children().wrapAll('«div E: 
class-"slides control"/»'); l x 
qx 
9 - 
10 var elem = $(this), E 
7i control - $('.slides control',elem), = 
12 total = control.children().size(), E: 
四 13 width = control.children().outerWidth(), E 
(3| 14 height = control.children().outerHeight(), 二 
o 15 start - option.start - 1, 一 
16 effect = option.effect.indexOf(',') < © ? option.effect : option.effect. Ue -— 
E, replace(' ', '').split(',') [9], i s crip... : 
b| 17 paginationEffect = option.effect.indexOf(',') < © ? effect : option.effect. = 
replace(' ', '').sptit(',')[1], m 日 期 : 2014/8/25 14:33 大 小 : 3KB 
>=| 18 next = 0, prev = ©, number = 0, current = 0, loaded, active, clicked, DOM 
ER position, direction, imageParent, pauseTimeout, playInterval; 
=| 19 
«| 2e // 确认 只 有 一 个 幻灯 片 
21 if (total < 2) 1 E 
— E E É E | M 
© [Ci Q. es x 20v HAA HTML 文档 的 DoM 结 


图 7-20 ”将 编写 的 JavaScript 脚本 语言 保存 为 文件 


对 程序 样式 基础 内 容 设 置 进行 了 中 文 纺 诺 ， 核 心 的 代码 注释 如 下 : 


//default options 
$.fn.slides.option = { 
preload: false, // 预 载 图 像 ， 图 像 的 幻灯 片 设置 为 true 
preloadImage: null, — //preloader 的 加 和 载 图 像 的 名 称 和 位 置 ， 默 认为 “/img/loading.gif” 


container: 'con', IA JA] ARRA SX "slides container" 
generateNextPrev: false, VAJEN- < 

next: 'next', /下 一 个 按钮 的 类 名 

prev: 'prev', // 上 一 个 按钮 的 类 名 

pagination: false, // 如 果 不 使 用 分 页 ， 可 以 设置 为 false 
generatePagination: true, // 目 动 生 成 分 页 

prependPagination: false, / 采 置 分 页 

paginationClass: 'pagination', /用 于 分 页 的 类 的 名 称 

currentClass: 'current', /当前 类 的 类 名 

fadeSpeed: 350, [Fs ELE ER RE EA ee b D FE EP] OR C52] t8 


fadeEasing: ", /扩展 jQuery 的 插件 前 必须 加 载 


7 


V 


TML5t*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


slideSpeed: 350, I E EI JE LJ Se b D FR EP ET 2] 2 ERI 
slideEasing: ", /扩展 jQuery 的 插件 前 必须 加 载 

start: 1, aoa SUI CC v JPSEVIYAIPISESISITU 

effect: 'slide', /选择 两 种 简单 的 切换 过 渡 方 式 ， 即 slide. fade 
crossfade: false, HÆFT EVER ERI AJ Fr 3A BAN RNS 

randomize: false, /设置 为 tue， 随 机 弥 灯 所 


play: 0， /有 目 动 播放 约 灯 片 ， 正 数 将 设置 为 tue， 并 在 坚 秒 时 间 之 间 的 约 灯 户 动 画 
pause: 0，V/ 单 击 下 一 页 、 上 一 页 或 分 页 暂 俘 约 灯 上 请， 正 数 将 设置 为 true， 以 曼 秒 为 单 
/位 的 暂 俘 时 间 


hoverPause: false, IEEE. AT RBS 

autoHeight: false, /设置 为 上 自动 调整 高 度 真 实 

autoHeightSpeed: 350, / cte E es Es JE TR), EAS A SR 

bigTarget: false, /设置 为 tue， 在 整个 约 灯 片上 单 击 链接 到 下 一 张 约 灯 方 
animationStart: function() {}, // 在 动画 的 开始 调用 的 函数 

animationComplete: function() (1, /在 动画 完成 后 调用 的 函数 

slidesLoaded: function() (! /函数 被 调用 时 滑 块 满载 


J: 
在 index.js 文件 中 还 要 进行 样式 的 应 用 设置 ， 有 共 体 代码 如 下 : 


$(.sbanner box').slides({ 


container: 'box ul', IA JE] HERRERIA A 
generateNextPrev: false, 有 目 动 生成 下 一 个 y EAH 
next: null, /下 一 个 按钮 的 类 名 

prev: null, // 上 一 个 按钮 的 类 名 

pagination: true, // 如 果 不 使 用 分 页 ， 可 以 设置 为 false 
generatePagination: false, // 目 动 生成 分 页 
prependPagination: true, /前 置 分 页 

paginationClass: 'nav', /用 于 分 页 的 美的 名 称 
currentClass: 'on // 当 前 类 的 类 名 

play: 3000, 

pause: true, 


hoverPause : true 


由 
(5) 选择 滋 单 栏 上 的 “文件 ”一 “保存 ”命令 ， 然 后 按 (F12〉 键 ， 束 可 以 看 到 图 片 切 
换 的 效果 了 。 


功能 模块 的 下 页 布局 


网 站 有 很 多 功能 模块 ， 如 电子 商城 、 新 闻 系 统 、 留 言 板 等 ， 这 些 模块 的 一 些 重要 的 新 发 
布 的 信息 名 要 在 首页 上 体现 。 例 如 本 实例 是 个 电子 商城 ， 束 需要 将 新 发 布 的 产品 、 市 场 的 细 
分 等 信息 展示 到 首页 上 。 


电子 商城 百 页 布局 
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市 场 精 选 频道 主要 用 于 推荐 精品 的 市 场 和 商铺 ， 如 图 7-21 所 示 。 从 技术 层面 分 析 ， 主 
要 使 用 到 了 JavaScript 的 轮 播 ， 使 用 DIV+CSS 实现 的 单 击 不 同城 市 的 选项 卡 ， 可 实现 城 
市 的 切换 布局 。 因 JavaScript 的 轮 播 技术 大 同 小 异 ， 这 里 不 再 介绍 ， 此 处 重点 介绍 一 下 选项 


| : 的 切换 fH Ja] Jj 法 。 
Wh ”白马 服装 批发 市 场 。 银 基 骤 装 市 声 do AE dcm dem dcm 北京 北 YO ë 地 先生 求购 蓝牙 音箱 数 量 : 100 个 Mg — 地 先生 求购 蓝牙 言 箱 数 量 : 100 个 
热门 市 场 革 门 白 服装 市 场 七浦 路 服装 市 场 热门 区 域 京 北京 北京 求购 信息 李 先 生 求 购 蓝牙 言 箱 数量 : 100 个 实时 订单 李 先 生 求购 蔚 牙 言 箱 数量 : 100 个 
dip 市 场 精 选 rS r^ mm xm 商铺 精 选 
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图 7-21 市场 精 选 的 效果 
(1) 基础 的 DIV 布局 代码 如 下 : 


«div class="tit"> 

«p class-"tit 1"><a href="#"> 市 场 精 选 </a></p> 

«p class-"tit r clearfix"> 
«a class-"market city" href="javascript:;"> 北 京 </a> 
«a class-"market city" href="javascript:;"> 上 海 </a> 
<a class-"market city" href="javascript:;"> 广 州 </a> 
«a class-" market city" href="javascript:;"> 成 都 </a> 
<a class-"market city" href="javascript:;"> 天 津 </a> 
</p> 

</div> 


(2) 单 击 上 海 等 其 他 城市 ， 实 现 类 似 选 项 卡 的 切换 ， 主 要 是 通过 CSS 样式 的 控制 和 
JavaScript 动画 的 触发 实现 。index.css 样式 中 市 场 的 样式 控制 如 下 : 


/* 市 场 */ 

.market{ width:893px; float:left; padding-bottom:9px; } 

market .tit{ height:38px; line-height:38px; } 

market .tit 11 float:left; width:85px; border-bottom:1px solid #cc0000; font-size:18px; line-height:38px; 
padding-left:30px;  background:url(../img/index/micon.png) lpx 7px  no-repeat;) 

market .tit ] af color:zZec0000; | 

.market .tit r{ float:left; width:678px; border-bottom:1px solid #e9e9e9; font-size: 14px; line-height:38px; 
padding-left: 100px; } 

market .tit r a{ color:Z737373; padding:0 15px; float:left;) 

.market .tit r a.on{ background:zcc0000; color:#fff; | 


"s HTML5*CSS- JavaScript Wz5BAAnBH 


(3) 


特价 商品 图 片 轮 播 使 用 的 技术 也 是 JavaScript， 但 使 用 的 不 仅仅 是 自动 轮 播 ， 


.market sbanner{width:437px; height:180px; overflow: hidden; position:relative; float:left; margin:12px 
17px 6px 0; } 

.market sbanner.box ul{ position:absolute;top:Opx; left:Opx; height:240px; | 

height:180px; float:left;  } 

.market sbanner li img(width:437px; height: 180px; vertical-align:middle;} 


market sbanner li (width:437px; 


market sbanner .navíposition: absolute; width:54px; height:l3px; bottom:l4px; right:l5px; z-index: 
999; | 

market sbanner .nav li{ width:l3px; helght:13px; cursor: pointer; margin-right:5px; background- 
position:-105px -25px; } 

market sbanner .nav li a( width:13px; height: 13px; display:block; } 

market sbanner .nav li.on{ background-position:-121px -25px; | 

market list{ width:211px; height:180px; float:left, padding:12px 16px 6px 0; | 

market listpr( padding-right:0; } 

market list img( width:21 1px; height:146px; overflow:hidden; vertical-align:middle; 

market list .name{ color: 666; display:block;  line-height:334px;  font-size:l6px; width:211px; 
overflow:hidden; } 


market list .name 11 font-size: 12px; color:#a9a9a9; | 


在 index.js 文件 中 ， 市 场 精 选 的 JavaScript 选项 卡 动画 触发 命令 如 下 : 


/市 场 精 选 
$(.market city').click(function() f 
var idx = $(this).index(); 
$S(this).siblings().removeClass('on); 
$(this).addClass('on"); 
$(.market con').hide().eq(idx).show(); 
DD 
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前 品 和 品牌 馆 两 个 栏目 的 布局 是 一 样 的 ， 这 里 介绍 特价 商品 栏目 的 布局 ， 如 图 7-22 


女装 玩具 布艺 家纺 
莫 莫 潮 
ERr 
品牌 童装 秒杀 进行 时 
独家 定制 FARE 

产品 标题 产品 标题 产品 标题 。 产品 标 是 产品 标题 产品 标题 。 产品 标 题 产品 标题 产品 标题 。 产品 标题 产品 标题 产品 标题 WASE MARE 
¥ 50.00 ¥ 50.00 x 50.00 x 50.00 
火热 进行 中 
童装 批发 直 供 
厂家 直 供 一手 货源 BH 
i 


para aaa 产品 标题 产品 标题 产品 标题 — — 产品 标题 产品 标题 产品 标题 
x 50.0 x 50.00 x 50.00 
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图 7-22 ”特价 商品 栏目 的 效 末 


单 击 左 、 


电子 商城 百 页 布局 


右 箭头 可 以 切换 ， 实 现 的 方法 如 下 。 
(1) 用 DIV+CSS 定义 布局 : 


«div class-"special 1 box" 
«ul class-"con"- 
<li><a href="#"><img src-"img/index/pic8.]pg" »«/a»«/li 
<li><a href="#"><img src-"img/index/pic8.]pg" »—/a»«/li- 
<li><a href="#"><img src-"img/index/pic8.]pg" »—/a»«/li 
</ul> 

«div class="filter"></div> 

«ol class="nav"> 
<li> 
<p class="txt1"><a hre 伟 "如 > 童装 批发 直 供 </a></p> 
«p class="txt2"> 厂 家 直 供 一 手 货源 </p> 
</li> 


<li style="display:none;"> 

«p class="txt1 "><a hre 伍 "#'"> 鞋 装 批 发 直 供 </a></p> 
<p class="txt2"> 厂 家 直 供 二 手 货 源 </p> 

</li> 


<li style="display:none;"> 

<p class="txt1"><a hre 伟 "如 > 童装 批发 直 供 </a></p> 
«p class-"txt2"-] AE san 手 货源 </p> 

</li> 

</ol> 

<div class="btn"> 


<a href-"javascript:;" class="prev"></a> 


<span> 1/3</span> 
<a href-"javascript:;" class="next" ></a> 
</div> 
</div> 
(2) 在 index js 文件 中 ， 特 价 商品 轮 播 的 JavaScript 动画 触发 命令 如 下 : 
/特价 商品 轮 播 


var len = $(.special 1 box .con li').length, num = 1; 
$(.special 1 box .btn .prev").click(function() { 
num--; 
ifínum«1)1 


num - len; 


DD 
$(.special 1 box .btn .next").click(function() { 


num++; 
if(num>len){ 


num = l; 


}); 


Ki HTML5*CSS- JavaScript 网 页 布局 从 入 门 到 精通 


$('.special 1 box'").slides({ 

container: 'con', 

generateNextPrev: false, 

next: 'next', 

prev: 'prev', 

pagination: false, 

generatePagination: false, 

play: 0, 

pause: true, 

hoverPause : true, 

animationComplete: function(){ 
$(.special 1 box .nav 1i").hide(); 
$(.special 1 box .nav li').eq(num-1).show(); 
$(.special 1 box .btn span").html(num-/--len); 


}); 


由 于 其 他 布局 比较 简单 ， 这 里 融 不 一 一 介绍 了 ， 其 中 的 选项 卡 切换 撤 术 和 市 场 精 选 频道 
的 切换 技术 相同 。 


(EISE 版 权 内 容 排版 布局 


底部 的 厂 权 页 面 是 一 个 静态 页 面 ， 制 作 非 常 简单， 可 以 在 Dreamweaver CC 2015 中 下 接 
排版 设计 ， 完 成 的 效果 如 图 7-23 所 示 。 


注册 新 用 户 注册 新 用 户 注册 新 用 户 注册 新 用 户 注册 新 用 户 

帐号 密码 帐号 密码 帐号 密码 帐号 密码 帐号 密码 

买 家 入 门 买 家 入 门 买 家 入 门 买 家 入 门 买 家 入 门 

ERAT ERAT ERAJ ERAJ ERAJ 买 家 保障 


6 2015 环 博 文化 版 权 所 有 京 ICP 备 15025146 号 -1| 京 公 网 安 备 110000000000 号 京 ICP 证 100000 
本 站 内 容 竺 用 户 自行 发 布 ， 其 真实 性 、 会 法 性 由 发 布 人 负 素 ，17skill.com 不 提供 任何 保证 ， 亦 不 承担 任何 法 律 泰 任 


7-23 ”版 权 页 面 的 效果 


如 末 需 要 快速 建立 首页 ， 可 以 参考 本 书 光 盘 中 完成 的 页 面 ， 奏 看 代码 ， 方 便 地 完成 目 己 
的 购物 系统 首页 的 设计 与 制作 。 


La wa 


Es 


8 =a ”用 户 生理 系统 布局 


在 网 站 的 建设 开发 中 ， 我 们 首先 要 接触 的 驶 是 用 户 管理 系统 的 开发 ， 即 网 站 提供 给 会 员 
注册 并 能 登录 进行 一 些 操 作 的 基础 功能 。 一 个 典型 的 用 户 系 统一 般 应 该 有 用 户 注 册 功 能 、 用 
户 登 录 功 能 、 取 回 密码 功能 等。 本章 将 以 第 7 章 开 发 的 电子 商务 系统 实例 为 基础 ， 继 续 设 计 
和 布局 用 户 管 理 系统 ， 介 绍 用 户 管 理 系统 的 规划 方法 和 布局 方法 。 需 要 注 划 学习 的 地 方 是 在 
提交 表单 时 使 用 JavaScript 实现 的 交互 验证 方法 。 


n M AI] F i 


本 章 学 习 重点 : 


(7 用 户 管 理 系 统 的 规划 
(7 用 尸 注册 功能 的 布局 
O 提交 表单 的 交互 验证 方法 


(7 用 尸 登 录 功 能 的 设计 
(— 找 回 密码 的 设计 与 实现 


"s HTML5-4CSS- JavaScript CELITNBELTI. 


用 户 管 理 系 统 的 规划 


在 制作 网 站 时 ， 一 般 要 在 制作 之 前 设计 好 网 站 各 页 面 之 间 的 链接 关系 ， 绘 制 出 系统 脉络 
图 ， 这 样 可 方便 后 面 整个 系统 的 开发 与 制作 。 


了 系统 结构 设计 
“用 户 管理 ”的 系统 结构 设计 如 图 8-1 所 示 。 本 系统 主要 的 结构 分 成 用 户 登录 入 口 与 注 
册 入 口 两 个 部 分 ， 其 中 按照 现在 主流 的 注册 方式 又 分 为 手机 广 册 和 邮箱 注册 两 种 。 


选择 验证 方式 .html 


手机 验证 码 .html 邮箱 验证 .html 


LI 
图 8-1 系统 结构 图 
这 里 要 说 明 的 是 在 实际 布局 时 生成 的 HTML 文件 一 定 要 用 小 写 的 英文 名 ， 本 书 为 了 读 
者 学 习 和 使 用 方便 ， 将 HTML 文件 名 写成 中 文 名 ， 
o4 c p BAUR T 


本 系统 的 主要 结构 分 为 用 户 登 录 和 注册 两 个 部 分 ， 整 个 系统 中 共有 9 个 页 面 ， 各 页 面 的 
名 称 和 对 应 的 文件 名 、 功 能 如 表 8-1 所 示 。 


表 8-1 用 户 管理 系统 网 页 设计 表 


页 面 名 称 功 能 
登录 .html 实现 用 户 管理 系统 的 登录 功能 的 页 面 
个 人 资料 .html 用 户 登 录 成 功 后 显示 的 页 面 
注册 .html 新 用 户 用 来 注册 输入 个 人 信息 的 页 面 


人 确认 账 写 .html 确认 需要 找 回 密码 的 账号 页 面 


用 户 管理 系统 布局 


(BE) 
页 面 名 称 Jj 能 
选择 验证 方式 .html 对 找 回 密码 的 两 种 方式 选择 的 页 面 
手机 验证 码 .html 使 用 手机 验证 码 的 页 面 
邮箱 验证 .html 使 用 邮箱 验证 的 页 面 
修改 密码 .html 修改 旧 密 码 的 页 面 
找 回 密码 .html 找 回 密码 成 功 的 页 面 


| Section | 


用 书 注 册 功 能 的 布局 


用 户 登 录 系 统 是 为 数据 库 中 已 有 的 老 用 户 登 录用 的 ， 一 个 用 户 管 理 系统 还 应 该 捉 供 新 用 
户 注册 用 的 页 面 。 对 于 痢 用 户 来 说 ， 通 过 单 击 首页 上 的 “免费 注册 ” 超 链接 进入 页 向， 在 该 
页 面 可 以 实现 新 用 户 注 册 的 功能 。 


Jen C RIPTERB a rà DIV 


“注册 .html” 页 面 主要 实现 用 户 注册 的 功能 ， 目 前 主要 分 为 手机 注册 和 邮箱 注册 ， 完 成 
的 页 面 设计 如 图 8-2 所 示 。 


易 购 网 Mh: 如 天 帮助 ， 请 咨询 Ema] 
1TSkill. com 欢迎 注册 MEM 
手机 注册 邮箱 注册 我 已 经 注册 , 现在 就 登录 
* 手 机 号 : 
— «rp 手机 快速 注册 
验证 本 
中 国 大 陆 手 机 用 户 ， 
| 编辑 短信 “ SP ”发送 到 |: 
"EA: | 1069013355500 
清 设置 密码 
请 确认 密码 


司 我 已 阅读 并 同意 《 易 购 网 用 户 注册 协议 》 


(8? 易 购 网 页 面 ' 改 进 建议 


fEEZSE | 淘宝 网 | Zë | EB | 一 淘 | 阿里 妈妈 | 淘宝 旅行 | 虾米 | 阿里 云 计算 | Yunos | 万 网 | 支付 宝 | 来 往 
8-2 ”用户 注册 页 面 样式 
(1) 在 Dreamweaver CC 2015 中 选择 菜单 栏 中 的 “文件 ”一 “新 建 ” 命 令 ， 在 网 站 根 月 


录 下 新 建 一 个 名 称 为 “注册 .html” 的 网 页 并 保存 。 
(2) 在 网 页 代码 窗口 中 输入 前 台 的 DIV 布局 代码 : 


«IDOCTYPE html> 
«html lang="en"> 
<head> 


<meta charset="utf-8"> 


HIM CSS rJavascript BESRAATHNE 


«meta http-equiv-" X-UA Compatible" content-" IE-edge,chrome-1 "7 
<!--IE8 的 专用 标记 ， 用 来 指定 IE8 Naar AM Chrome 内 核 ， 特 定 版 本 的 IE UU] Ae JJ 
式 ， 以 此 来 解决 部 分 兼容 问题 --> 

<title> 注 册 </title> 

«meta name="description" content=""> 

«meta name="viewport" content="width=device-width; mitial-scale=1.0"> 

<link href-"css/global.css" type="text/css" rel="stylesheet" /> 

<link href-"css/login.css" type="text/css" rel="stylesheet" /> 

«script type-"text/Javascript" src-"js/jquery.1.8.2.min.]s" ></script> 

«script type-"text/Javascript" src-"js/regis.js" ^«/script^ 
</head> 
<body> 
<!--=S header --> 
«div class-"login head"> 

«div class-"head con wrap clearfix"> 

«div class-"head lf 1"> 
«hl class-"logo f 1"> 
«a href="#"><img src-"img/login log.jpg"/»«/a» 
</h1> 
<div class="welcome"> 欢 迎 注册 </div> 


</div> 
<div class="head rf r"> 
«span class-"f 1"> 如 和 需 帮助 ， 请 咨询 </span> 
<a lass-"f 1" href="#"> 在 线 咨 询 </a> 
</div> 
</div> 
</div> 
<!--=S header --> 
«div class="wrap"> 
«div class-"register con"> 
«div class-"regis mt" 
«ul class-"clearfix regis. sele"^ 
<li class-"on"7«span- FLE H</span><s></s></1i> 
<li class=""><span> 邮 箱 注册 </span><s></s></li> 
</ul> 
«div class="haveRe"> 我 已 经 注册 ， 现 在 就 «a hre 伟 "登录 .html"> 登 录 </a></div> 
</div> 
«div class-"reg con clearfix"> 
«div class-"reg 1f 1"> 
«div class-"reg input" 
<!-- 手 机 注册 --> 
«ol class-"reg enterprise reg phone" 
<li class-"phoneNum"- 
<strong><i>*#</ 这 手机 号 : </strong> 
<input id-"e phone" type="text" disableautocomplete-"" autocomplete-"off' vid-"0" flag-"off" 


name-"e phone" 


n" 


vid-"3" flag-"off" 


flag-"off" 


«input 


第 8 章 


«span 1d="e phoneTip" class=""></span> 
</li> 

<li class="get_codeph"> 

«div ><a href="#"> fa RIPE SUE Ra —/div 


</li> 


«]i 


<strong><i>*#</ 这 验证 但 : </strong> 


用 户 管理 系统 布局 


e 


«input id-"e PhoneCode" class-"e VerificationCode" type="text" disableautocomplete- 


autocomplete-"off' vid-"0" flag-"off' name-"e VerificationCode" 


«span id-"e codeTip" class=""></span> 


</li> 

<li> 

«strong»«i»*«/i-2: R : </strong> 

<input id="ename" type="text" value-"" disableautocomplete 
name="ename"> 


<b class="re_ico name ico"></b> 


<span id="enameTip" class=""></span> 
</li> 

<li class="setPsbox"> 

«strong»«i»*«/i- ij V A KA: </strong> 


<input i 


LM 


passwd" type-"password" disableautocomplete 


—M 


name-"passwd"- 


«b class-"re ico ps 1lco"></b> 
«span id-"passwdTip" class=""></span> 
</li> 

<li class="psBox"> 

«div class="psStrong psStrongl clearfix"> 
«div class-""239«/div» 
<div> 中 </div> 

<div> 吕 </div> 

</div> 

</li> 

<li> 

<strong><i>*</i> 15 fff i 2 f ; 


id-"passwd2" 


</strong> 


一 1 


type-"password"  disableautocomplete 


flag-"off' name-"passwd2"- 


«b class-"re ico ps 1lco"></b> 


«span id-"passwd2Tip"^«/span- 


</li> 


</ol> 


<!-- 邮 箱 注册 --> 


<strone> 


<ol class="reg enterprise reg email" 
<li> 


«jin 


</strong> 


一 "1 


LM" 


autocomplete-"off" 


autocomplete-"off' vid-"3" 


autocomplete-"off'  vid-"3" 


style-"display:none"- 
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—M 


<input id-"email" type="text"  disableautocomplete 


LM" 


autocomplete-"off'  vid-"0"  flag-"off" 


name="emall"> 


«span id-"emailTip" class=""></span> 


</li> 

<li> 

<Sstrong><i>*#</ 这 会 员 名 : </strong> 

«input id="enames" type="text" value-"" disableautocomplete="" | autocomplete-"off' vid="3" 


flag-"off' checked-" checked" name-"enames"- 
«b class-"re ico name 1co"></b> 
«span id-"enamesTip" class=""></span> 
</li> 
<li class="setPsbox"> 
«strong»«i»*«/i- T V E. AA: </strong> 


—M 


«input id-"passwds" type="password" disableautocomplete 


BENTL) 


autocomplete-"off' vid-"3" flag-"off' 
name-"passwd"- 

«b class-"re ico ps 1lco"></b> 

«span id-"passwdsTip" class=""></span> 

</li> 


<li class="psBox"> 


«div class="psStrong psStrong2 clearfix"> 

<div class=""> 弱 </div><div> 中 </div><div> 强 </div> 
</div> 

</li> 


<li><strong><i>*</ 户 请 人 确认 密 公 : </strong> 
«input id="passwds2" type="password" disableautocomplete-"" autocomplete="off" vid="3" flag="off" 
name="passwd2"> 
«b class="re ico ps _ lco"></b> 
«span id="passwds2Tip"></span> 
</li> 
-li»«strong»«i-*«/i- s hd: </strong> 


«input id-"e VerificationCode" class 


n" 


EAT 


e VerificationCode" type="text" disableautocomplete- 


—M 


autocomplete-"off" vid-"0" flag-"off'" name-"e VerificationCode"- 

«img class-"re pic" src-"img/nubcode.jpg"/ 

«aid-"e changelmg" class-"e changeImg" hre 人 f="javascript:;"> 看 不 清 ?<em> 换 一 张 </em></a> 

«span id="e_VerificationCodeTip"> 请 输入 图 片 中 的 字符 ， 不 区 分 大 小 写 </span> 

</li> 

</ol> 

<div class="reg_agree"> 

<label><input type="checkbox"> 我 已 阅读 并 同意 </label><a href="#"> (UA pd HAA EN </a> 
</div> 
<div class="reg submit"> 

«div 1d="reg submit"><a href="javascript:;"></a></div> 
</div> 
</div> 
</div> 


«div class-"reg rf r"> 


用 户 管理 系统 布局 


«img src-"img/reg r.jpg"/^ 


</div> 

<div class="reg_extra"> 

<img src="img/c5.png"/><a hre 伍 "#">" 易 购 网 页 面 "改进 建议 </a> 

</div> > 


</div> 
</div> 
</div> 


布局 后 的 页 面 如 图 8-3 所 示 。 


x 
C fi D file///D:/yigou/;tRR.html 


2 a PA 


如 需 帮 助 ， 请 咨询 在 线 咨 询 


AD 手机 快速 注册 


中 国 大 陆 手 机 用 户 ， 
编辑 短信 “SP ”发 送 到 : 


1069013355500 


四 我 已 阅读 并 同意 《 易 购 网 用 户 注册 协议 》 


全 球速 训 通 | 淘宝 网 | 天 并 | 奈 划算 | 一 淘 | 阿里 妈妈 | 淘宝 旅行 | 虾米 | 阿里 云 计算 |YunOS| 万 网 | 支付 宝 | 来 往 
© 2015 环 博文 化 版 权 所 有 京 ICP 备 15025146 号 -1| 京 公 网 安 备 110108003464 号 京 ICP 证 100626 
本 站 内 容 系 用 户 自行 发 布 ， 其 真实 性 、 合 法 性 由 发 布 人 负 喜 ，17skilcom 不 提供 任何 保证 ， 亦 不 承担 任何 法 律 考 任 


8-3 DIV 初始 布局 的 效果 


重点 提示 : 

在 为 表单 中 的 文本 域 对 象 命名 时 ， 由 于 表单 对 象 中 的 内 容 将 被 添加 到 相应 的 数据 库 表 
中 ， 在 前 端 布局 的 时 候 可 以 将 表单 对 象 中 的 文本 域名 设置 为 与 数据 库 中 的 相应 字段 名 相同 ， 
如 将 文本 “密码 ”对 应 的 文本 框 命名 为 passwd， 这 样 做 也 方便 后 台 程 序 员 进行 对 接 编写 程 
序 。 隐藏 域 是 用 来 收集 或 发 送信 息 的 不 可 见 元 素 ， 对 于 网 页 的 访问 者 来 说 ， 隐 藏 域 是 看 不 见 
的 。 当 表单 被 提交 时 ， 隐 藏 域 会 将 信息 用 设置 时 定义 的 名 称 和 值 发 送 到 服务 器 上 . 


PL SS 样式 设计 


使 用 CSS 样式 控制 制作 DIV 标签 ， 使 其 与 设计 稿 一 致 。 同 时 ， 为 了 方便 访问 者 重新 注 
册 ， 应 该 在 页 面 中 设置 一 个 转 到 登录 页 面 的 文学 链接 ， 以 方便 用 户 登 录 。 

(1) 选择 菜单 栏 中 的 “文件 ”一 “新 建 ” 命 令 ， 在 网 站 的 css 目录 下 新 建 一 个 名 为 
login.css 的 网 页 并 保存 。 

(2) 其 中 将 “我 已 经 注册 ， 现 在 就 登录 ”文本 设置 为 指 癌 “登录 .html” 页 和 面 的 链接 。 具 
体 的 CSS 代码 如 下 : 


.wrap {width:990px; margin:0 auto;} 
a{color:#6c6c6c;} 

img {vertical-align:middle; } 

.focus { color:#333; | 
.head_con{padding:15px 0; height:60px;} 
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regis mtíposition:relative;) 

regis mt ul [padding-left:278px;] 

regis mt liffloat:left; width:100px; cursor:pointer; height:28px; font-size: 14px; line-height:28px; text- 
align:center; background:2f7f7f7; margin-right:6px; position:relative; ) 

regis mt span position:relative; z-index:5;j 

regis mt .first(z-index:5;] 

regis mt .on span{color:#b92120;} 

regis mt .on s(display:block;j 

regis mt li síposition:absolute; left:-lpx; top:-6px; width:108px; height335px; background:url 
(..Amg/reg 1.png) no-repeat 0 bottom; display: none;] 

regis mt .haveRe(position:absolute;right:20px; top:8px; color:#333;} 

regis mt .haveRe a{color:#0066cc;} 

register con .reg con(padding:38px 0 10px 80px;border: 1px solid Zddd;margin-bottom: 10px;} 

reg con .reg l{width:660px;} 

reg input li (height:32px;padding-bottom:30px;position:relative; | 

reg input.phoneNum,.reg input .setPsbox (padding-bottom:0;] 

reg input.get codephípadding:5px 0 5px 108px; *padding-left: 105px; height:20px; line-height:20px;) 
reg input .psBox [padding:5px 0 5px 108px;*padding-left: 105px; height:21px;j 

reg input .psStrong divífloatleft;  width:88px; M height21px;  line-height:21 px;margin-right:3px; 
color:#fff; text-align:center; background:Zeee;] 

reg input .psStrong .on (background:2b92120;] 

reg input .get codeph  a[ídisplay: inline-block; ^ width:133px;  height:20px;  text-align:center; 
background:url(../img/reg l.png) no-repeat 0 -45px; | 

reg input li strong (color:Z999;display:inline-block;font-size: 14px;font-weight:normal;line-height:32px; 
padding- right: 5px;text-align: right;vertical-align: top;width: 100px;) 

reg input li strong i{color: Ze84c19;font-style: normal; margin-right:3px;j 

reg input li nput{border:lpx solid 7aeaeae;color:Z030303;height:l6px;line-height:l6px; padding: 
7px;vertical-align:top;width:254px;) 

reg input li span (display:inline-block;height:32px;line-height:32px;max-width:255px;overflow:hidden; 
padding-left:22px;vertical-align:top;) 

reg input li .onError(background:url(../img/error.png) 0 center no-repeat;color: 7e40309;font- 
weight:normal;j 

reg input li .onFocus (background:url(../img/focus.png) 0 center no-repeat;color:26363063;font-weight: 
normal; 

reg input li .onCorrect(background:url(./img/right.png) 0 center no-repeat;color: 77fc169;font- 
weight:normal;) 

reg input .re ico[width:l7px;  heightil7px;  position:absolute;left:355px;  top:Spx;  *left:352px; 
background:url(../img/reg 2.png) no-repeat 0 bottom; } 

reg input.name ico(background:url(../img/reg 2.png) no-repeat 0 -64px; 

reg agree{ height:45px;] 

reg agree,reg submitípadding-left: 108px;*padding-left: 105px; } 

reg agree label,reg agree input, reg agree a(vertical-align:middle; color:#333;} 

reg agree aícolor:z0066cc; 

reg extra[text-align:right; clear:both; padding:0 15px 0 0;j 

reg submit|[padding-bottom: 1 4px; 
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reg submit a{display:inline-block; width:270px; height:38px; background:url(./img/reg l.png) no- 
repeat; } 

.reg r{padding-right:60px;} 

.reg_rimg{width:180px;height:180px;} 

reg con.e VerificationCode,.reg con .p VerificationCode,.reg con .f phone{width: 120px;} C 
re pic[width:48px; height:32px;] 

footer .link[height:40px; line-height:A0px;border-bottom:1px solid #ddd; border-top:lpx solid Zddd; 
color:#666;} 

.footer .link span {padding-right:10px;} 

.footer .link .first{margin-left:0;} 

.footer .link a{margin:0 11px;} 

.footer p{padding-top:13px; height:67px;line-height:20px;} 

.footer .pic {float:right;padding:20px 12px 0 0;} 

.footer .xin {margin:0 10px 0 18px;} 


TK WEBB: 

这 里 重复 使 用 到 了 CSS 里 面 的 position:absolute 与 position:relative， 两 者 的 使 用 有 什么 
[X 3]? 

absolute 指 绝对 位 置 ， 也 就 是 说 设 定 后 该 控件 
小 变化 而 影响 其 分 布 位 置 的 改变 。 

position 指 一 般 位 置 ， 也 就 是 说 设 定 后 该 控件 在 无 其 他 控件 的 影响 下 其 位 置 位 于 设 定 的 
地 方 。 如 果 其 他 控件 占用 了 设 定 的 位 置 ， 那 么 它 就 会 让 出 位 置 。 

relative 指 相对 位 置 ， 例 如 控件 与 控件 之 间 的 相对 位 置 ， 控 件 与 页 面 的 相对 位 置 。 打 个 
比方 ， 控 件 A 和 控件 B 是 相对 位 置 ， 那 么 当 控 件 A 的 位 置 发 生 改 变 时 控件 B 的 位 置 也 跟着 
改变 。 


定 在 页 面 的 菜 处 ， 不 会 因 其 他 控件 的 大 


过 


表单 的 交互 验证 


在 用 户 浏览 完整 体 的 表单 布局 页 面 之 后 ， 接 下 来 是 进行 表单 的 填写 。 在 填写 过 程 中 ， 会 


全 到 很 多 类 型 的 校 验 ， 例 如 即时 校 验 的 友情 类 提示 、 即 时 校 验 的 警示 提示 、 关 联 性 校 验 的 拥 
不 等 。 

1. 即时 校 验 的 友情 类 提示 

即时 校 验 的 友情 类 提示 不 是 提交 时 无 法 通过 的 出 错 冤 示 ， 而 是 给 用 户 一 些 更 合理 的 建议 
或 者 帮助 。 如 图 8-4 所 示 是 提示 用 户 注 册 名 的 组 成 。 


* LI 
: 
4-2 dre 日 由 中 全 叶子 过 & ce 


图 8-4 友情 类 提示 
当 onfocus 〈 事 件 在 对 象 获 得 焦点 光标 时 发 生 ) 的 时 候 会 出 现下 方 的 帮助 提示 类 信息 ， 
当然 也 有 很 多 网 站 会 做 成 暗 提 示 。 
2. 即时 校 验 的 警示 提示 
即时 校 验 的 警示 提示 属于 错误 类 提示 ， 这 类 错误 会 使 表单 无 法 提交 。 警 示 提 示 类 的 校 验 


HELL 


SHAK 
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重要 级 别 非常 蜗 ， 因 此 在 闫 色 和 位 置 上 都 需要 非常 明显 。 有 很 多 网 站 甚至 将 出 错 内 容 和 出 错 
后 如 何 修改 的 建议 都 放 在 该 提示 中 显示 ， 如 图 8-5 Bron. 
手机 注册 。 邮箱 注册 
“邮箱 : O 此 项 为 必 填 顺 
“会 员 名 : Q 此 页 为 必 寺 页 
“请 设置 灾 码 : | O 此 项 为 必 填 顺 


图 8-5 警示 提示 
3. 关联 性 校 验 的 提示 
关联 性 校 验 指 所 填写 项 之 间 会 有 相互 影响 的 逻辑 关系 ， 后 一 项 的 填写 是 盏 正确 取决 于 前 


几 项 的 填写 内 容 ， 如 设置 密码 填写 项 与 确认 密码 填写 项 不 一 致 时 会 提示 错误 ， 有 具体 如 图 8-6 
所 示 。 


SERS: @@eeee w^ 回 显 示 密 码 字符 
安全 程度 : 


TUER: 
两 次 输入 密码 不 一 致 
图 8-6 fi p 


实例 中 的 注册 方法 用 到 手机 注册 和 邮箱 注册 ， 使 用 JavaScript 进行 单独 的 验证 ， 编 写 的 
验证 代码 保存 在 regis.js 页 面 中 ， 并 在 具体 的 代码 下 分 别 进行 了 标注 。 


$(document).ready(function(){ 
var msg = { 
"email": 
1 
"succ": "R5 EW", 
"on focus":" 请 正确 填写 ， 用 于 登录 和 找 回 密码 "， 
"regexp": "^([a-zA-Z0-9_\\-DA@(([a-zA-Z0-9\-P+\.)+([a-zA-Z0-9]{2,4})+$", 
"err_invalid":" 电 子 邮 箱 格 式 不 正确 ， 请 重新 输入 "， 
'err len':" 请 输入 5-50 个 字符 的 邮箱 地 址 " 


E 


"passwd": 

1 
"suce":" 填 写 正确 "， 
"on_focus":" 请 输入 6-20 位 字母 、 数 季 或 标点 符号 的 组 合 "， 
"regexp" : "^[a-zA-Z0-9' —!(q)f$9o^& *()- ="? SAAS", 


"err_len":" 请 输入 6-20 位 字母 、 数 字 或 标点 符号 的 组 合 "， 
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"err invalid": i48 6-20 位 字母 、 数 学 或 标点 符 扎 的 组 合 " 


E 


"passwd2" 
{ 
"succ": "H 5 EWM", 
"on focus":" 请 再 次 输入 密码 "， 
err_ invalid':' 两 次 密码 输入 不 一 致 ， 请 重新 输入 。 
js 
"VerificationCode": ”// 图 片 验 证 人 码 
{ 
"succ": "H5 EWM", 
"on focus":" 请 将 网 片 内 的 数字 盾 到 输入 框 "， 
"regexp":"[0-9]*", 
"err len":" 验 证 码 错 误 "， 
"err invalid"; Jr uE f v" 


js 
"PhoneVerificationCode": ” // 手 机 验证 人 码 
{ 
"succ": 3855 TE ARI", 
"on _ focus":" 请 输入 您 收 到 的 6 位 验证 人 码 "， 
"regexp":" [0-9]4-", 
"err len'":" 难 证 人 码 填 写 错 误 ， 请 重 靳 输入 或 重新 获取 "， 
"err invalid":" 难 证 公 填 写 错误 ， 请 重新 输入 或 重新 获取 " 


E 


"userName": /会 员 名 
"succ": "A5 TERR, 
"on focus":" 请 填写 4-16 字符 的 会 员 名 称 "， 
"err len":" 会 员 名 为 4-16 TIF", 
"err_invalid":" 会 员 名 称 不 能 包含 特殊 符号 ", 
"err num":" 会 员 名 称 不 能 完全 使 用 数字 表示 " 


js 
"contact": /联系 人 名 衬 
t 
"succ": 3E EW", 
"on _ focus":" 请 填写 联系 人 姓名 "， 
/l'regexp" : "^[\u4E00-\u9FA5]{2,15}$", 
"err len":" 请 输入 2-15 个 汉字 
"err_invalid":" 请 输入 2-15 MAF", 
"err num":" 请 输入 2-15 个 汉字 " 
p 
"phone": /手机 验证 
{ 
"suce":" 填 写 正确 "， 
"on focus":" 请 填写 11 位 手机 号 人 码 "， 
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"regexp" : "^13[0-9] (931 5[0-9] (93]18[0-9] (93]14[0-9] (91 S", 
"err_len":" 请 填 与 正确 的 手机 号 码 "， 
"err invalid":" 请 填写 正确 的 手机 号 人 码 " 


j; 
var register = { 
init : function(){ 
this.email arr = new Array(); 
this.phone btn = 60; 
this.phone time = null; 


this.idx = -1; 
this.flag1 = false; /获取 手机 验证 码 状 态 标志 
this.flag2 = 0; /选项 卡 切换 标志 


this.mailflag = false; 
this.veriflag = false; 
this.events(); 
Jo 
ARESA R TED e Hon 
select reg : function()1 
var s — true; 
switch(this.flag2) 1 
case 0 : 
$(".reg input input[vid-'0']").each(function() { 
if(S(this).attr('flag")- —'off) ( 


s — false; 
S(this).focus(); 
j 
H; 
break; 
case 1: 


$(".reg input input[vid-'1']").each(function() { 
if($(this).attr('flag') = ='off){ 


s = false; 
$(this).focus(); 
j 
H; 
break; 
j 
return S; 
js 
PRAE RIURE */ 


events : function()1 
var this = this; 


H PEH ZR eT fen 


人 * 选 择 注册 方式 */ 

$(.regis sele li').click(function() f 
var idx = $(this).index(); 
S(this).siblings().removeClass('on").end().addClass('on); 
$(.reg enterprise').hide().eq(1idx).show(); 
 this.flag2 =idx; 


D 
RFR 
$(#email).bind({ 
focus : function()| 
| this.Focus(S(ZemailTip),msg.email.on focus); 
与 
blur : function(){ 
 this.reg len({ 
obj : $( email), 
tip : $(ZemailTip), 
reg : msg.email.regexp, 
name : 'email', 
min : 5, 
max : 50 
D» 
j 
H; 
PO ERES 


$("Ztpasswds").bind( ( 
focus : function()| 
 this.Focus(S(ZpasswdsTip'),msg.passwd.on focus); 
» 
blur : function()1 
 this.reg len({ 
obj : $('#passwds'), 
tip : $('#passwdsTip'), 
reg : msg.passwd.regexp, 
name : 'passwd', 
min : 6, 
max : 20 


D» 
 this.passwdNLS(S(passwds"),S(passwdsTip"); 
^ 
keyup : function()| 
var str = $(this).val(); 
| this.Strength(S(".psStrong2)str); 


3 
[mq ERAN 
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$("#passwd").bind( { 
focus : function(){ 
_this.Focus($('#passwdTip'),msg.passwd.on focus); 
blur : function(){ 
 this.reg len({ 
obj : $('#passwd'), 
tip : $(ZpasswdTip, 
reg : msg.passwd.regexp, 
name : 'passwd', 
min : 6, 
max : 20 


H 


_this.passwdNLS($("#passwd"),$('#passwdTip’); 
is 
keydown : function() 

var str = $(this).val(); 

| this.Strength(S(".psStrongl1^)str); 


和 
[jii REB AA 
$("#passwd2").bind({ 
focus : function()| 
 this.Focus($(Zpasswd2Tip'),msg.passwd2.on focus); 
j: 
blur : function) { 
| this.passwdConf(); 


J; 
/* 确 认 密 人 码 事件 */ 
$("#passwds2").bind( f 
focus : function(){ 
_this.Focus($('#passwds2Tip'),msg.passwd2.on_ focus); 


与 
blur : function(){ 
_thls.pasSwdConf2(); 
j 
DA 
/* y VELIS uS SEES 


$("#p VerificationCode").bind( f 
focus : function()1 
 this.Focus($( p VerificationCodeTip'),msg.VerificationCode.on focus); 
) 
blur : function() 1 
 this.reg len({ 


H PEH ZR eT fen 


obj : $(#p VerificationCode"), 

tip : $(#p VerificationCodeTip)， 
reg : msg. VerificationCode.regexp, 
name : 'VerificationCode', 

min : 4, 


max : 4 


D? 
| this.vail(); 


»» 
记 手 机 号 事件 */ 
$("#e phone").bind( ( 
focus : function()| 
 this.Focus($( 7e phoneTip',msg.phone.on focus); 
is 
blur : function()1 
 this.reg len(1 
obj : $('#e phone", 
tip: $i 7e phoneTip^, 
reg : msg.phone.regexp, 
name : 'phone', 
min : 11, 
max : 11 


3 


j); 
PTUS ER SEPEN/ 
$("#e PhoneCode").bind(í 
focus : function() { 
 this.Focus($( e codeTip),msg.PhoneVerificationCode.on focus); 
J» 
blur : function()1 
 this.reg len({ 
obj : $("#e PhoneCode"), 
tip: $('#e codeTip'), 
name : 'PhoneVerificationCode', 
min : 6, 
max : 0 


D; 


D 
/# 用 户 名 称 事 件 %/ 
$("#ename").bind( { 
focus : function()1 


| this.Focus($(ZenameTip'),msg.userName.on focus); 


E 
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blur : function(){ 
this.reg len({ 
obj : $("#ename"), 
tip : $(#enameTip'), 
name : 'userName', 
min : 4, 
max : 16 


D 


D 
$("#enames").bind( ( 


focus : function()| 
 this.Focus($(ZenamesTip'),msg.userName.on focus); 
J 
blur : function()| 
 this.reg len(1 
obj : $("Zenames"), 
tip : $(#enamesTip'), 
name : 'userName', 
min : 4, 
max : 16 


D 


H; 
IRA FALEN 
$('#f phoneValidation').click(function(){ 
_this.flagl = true ; 
this.new phone vchode(); 
j); 
此 提示 必 填 项 */ 
$(.reg input input').each(function(i){ 
S(this).blur(function() ( 
if(S(this).val()7 ^) 1 
$(this).siblings('span').attr('class','onError").html(' I 3jl Jj VHW; 
$(this).attr('flag','off"); 


» 
D 


IE USC 3 E RA UE RI 
$(#f phone^.change(function()( 
clearTimeout( this.phone time); 
 this.flagl = false; 
 this.phone btn-60; 
$(#f phoneValidation').removeClass(f Vali hover); 
 this.reg len(1 


H PEH ZR eT fen 


obj : $('#f phone", 

tip : $(#f phoneTip, 
reg : msg.phone.regexp, 
name : 'phone' , 

min : 11, 


max : 11 


D 
D 


/*reg submit 提交 事件 */ 
$(#reg submit').click(function(){ 
_ this.form submit(); 

H; 

) 

BO GENES 

Focus : function(obj,str)1 
obj.attr('class','onFocus"); 
obj.html(str); 

) 

FERES, LN PARISER ST 

reg len : function(o)1 
var Default — 


{ 
TED MM 
"min" : 0, 
"max" : 99999 
5 


var m = $.extend( (), Default, o); 

var Reg = new RegExp(m.reg); 

var len = m.obj.val().length; 
if(/[Na4E00-Nwu9FASNuF900-uFA2D]/g.test(m.obj.val())) f 


len += this.getCHLen(m.obj.val()); 

j 

if(lencm.min || len?» m.max) 1 
m.tip.attr('class','onError').html(msg[m.name].err len); 
m.obj.attr('flag",'off); 
return false; 

j 

if(Reg.test(m.obj.val()))1 
m.tip.attr('class','onCorrect').html(msg[|m.name].succ); 
m.obj.attr('flag",'on'); 

:else1 
m.tip.attr('class','onError').html(msg[m.name].err invalid); 
m.obj.attr('flag",'off); 
return false; 


PERI AR X 6 LESSER 
noRegister : function()1 
var this = this; 
var email-$('Zemail").val(); 
if (email ==" 
return false; 
$.ajax(1 
type:'post, 
ur]: 7, 
data:'email-'*email, 
async : false, 
dataType:'json', 
success:function(JsonData) 
1 

if (JsonData.errno == 1) 

1 
$(ZemailTip).removeClass('onCorrect"); 
$(ZtemailTip').addClass('onError'); 
$(0#kemailTip).html( 该 会 员 已 存在 ， 请 重新 输入 或 <a hre 伍 "#"> 直 接 登 录 </a>'); 

$('#email').attr('flag','off); 
_this.mailflag = false; 
return false; 

:else1 

 this.mailflag = true; 


J; 
) 
FIRR EENT TER W 
passwdNLS : function(obj,tip){ 
var str = obj.val(); 
var num = /^\d {6,20} $/; 
var let =/^[a-zA-Z]{6,20}$/; 
var sym = /^[^a-zA-Z0-9] {6,20} $/; 
if(num.test(str)|let.test(str)||sym.test(str)) 1 
tip.attr('class','onError'); 
tip.html(' 请 输入 6-20 位 字母 、 数 字 或 标点 符号 的 组 合 ); 
obj.attr('flag','off); 
return false; 


Ji 
PERS ENAME CERES PES 
Strength : function(ob;,str) 
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H PEH ZR eT fen 


function CharMode(1N)( 
if (IN>=48 && iN «—57) /数字 
return 1; 
if(iN>=65 && iN <=90) /大 写 
return 2; 
if (IN>=97 && iN «—122) ///]V 5 
return 4; 
else 
return 8; 
hi 
/bitTotal 函数 
/计算 密码 模式 
function bitTotal(num){ 
modes-0; 
for (1=0;1<4;1++){ 
if (num & 1) modes 
num>>>=1]; 
j 
return modes; 
h 
/返回 强度 级 别 


function checkStrong(SPW){ 
if (sPW.length<=4) 
return 0; //Z BN E 
Modes-0; 
for (120;1«sPW.]ength;i2—-) 
/密码 模式 
Modes|=CharMode(sPW.charCodeAt(1)); 
j 
return bitTotal(Modes); 
h 


var len = checkStrong(str); 


for(var 二 0; i<len; i++){ 
obj.find('div').eq(1).addClass('on"); 


s 
[SORA 
passwdConf :function()| 
if(S("?*passwd').attr('flag") =='off){ 
$('#passwd2Tip').attr('class','onError").html(' 请 先 输入 正确 的 密码 "); 
$('#passwd2').attr('flag','off); 
return false; 
:else1 
if($('#passwd2').val()==") return false; 
if (S(Zpasswd").val() != $(4passwd2').val()) 
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1 
S(V*passwd2Tip").attr('class','onError).html(msg.passwd2.err invalid); 
$(Ótpasswd2).attr('flag','off"); 
return false; 
}else{ 
$(*passwd2Tip").attr('class','onCorrect').html(msg.passwd2.succ); 
$4 passwd2).attr('flag','on"); 
return true; 
j 
j 
jə 
[AST B A I 


passwdConf2 :function() ( 
if($('#passwds').attr('flag') ^ —'off)( 
$('#passwds2Tip').attr('class','onError").html( 请 先 输入 正确 的 密码 "); 
$('#passwds2').attr('flag','off); 
return false; 
:else1 
if($('#passwds2').val()==") return false; 
if (S(passwds').val() != $('#passwds2').val()) 
1 
$(*passwds2Tip").attr('class','onError').html(msg.passwd2.err invalid); 
$('#passwds2').attr('flag','off); 
return false; 


velse{ 
$(#passwds2Tip').attr('class','onCorrect').html(msg.passwd2.succ); 
$('#passwds2'").attr('flag','on'); 
return true; 

j 


ja 
AARRE EN MF, MEUR A $. 9o*/ 
comNameNum : function(obj,tip,mess){ 
var str — obj.val(); 
if(/^[0-9]*$/.test(str)) 
tip.attr('class','onError').html(mess.err num); 
obj.attr('flag','off); 
j 
if(/^.* [2596 |-.*$/.test(str)) ( 
tip.attr('class','onError').html(mess.err invalid); 
obj.attr('flag','off); 


P 

un 

form submit : function()1 
alert(this.select reg()) 


#8% GLELPELUDUuP 


register.init(); 


H; | G 


PREA ETR Y HP EEERÉREECPHEUEZI BER B d Jede ERMER, ev A A a A 
根据 制作 网 站 的 需要 适当 地 加 入 其 他 更 多 的 注册 文本 域 ， 也 可 以 给 需要 注册 的 文本 域名 称 音 
分 添加 星 写 (*)， 所 醒 注册 用 户 注 章 。 


SER 用 户 登 录 模 块 的 设计 


本 市 主要 介绍 有 用户 登录 模块 的 制作 ， 在 该 模块 中 进行 登录 的 用 户 为 会 员 ， 所 以 界面 中 显 
示 的 是 “登录 ”字样 ， 需 要 制作 的 页 面包 括 “ 登 录 .html” 和 “个 人 资料 .html” 两 个 页 面 。 


:登录 贝 面 的 设计 


在 用 户 访问 该 管理 系统 时 ， 首 先 要 进行 号 份 验证 ， 这 个 功能 是 徘 登 录 页 面 来 实现 的 ， 所 
以 登录 页 面 中 必须 有 要 求 用 户 输入 用 户 名 和 密码 的 文本 框 ， 以 及 输入 完成 后 进行 登录 的 “ 登 
录 ” 控 钮 。 评 细 的 制作 步 又 如 下 : 

(OD 首先 来 看 一 下 用 户 登 录 页 面 的 设计 ， 如 图 8-7 所 示 。 


(a) x 


| > Q fi Dfile:///D:/yigou/ 登 陆 .html 


B = 
z W3 网 登录 如 过 帮助 ， 请 咨询 在线 将 询 | 
1TSkill. com 
ama 
my 


PRODUCTS 

企业 大 数据 技术 产品 _ ——€— 
E35. Pee WAN 
Ye e. — 


B 安全 控件 登录 忘记 登录 密码 ? 


手机 号 /邮箱 登录 免费 注册 


8-7. ”用户 登录 系统 衣 页 


(2) 登录 页 面 是 用 户 登 录 系 统 的 首页 ， 在 Dreamweaver CC 2015 中 创建 一 个 HTMLS X: 
档 ， 然 后 选择 订单 栏 中 的 “文件 ”一 “保存 ”命令 将 网 页 保存 。 前 台 的 DIV 布局 如 下 : 


«IDOCTYPE html> 
<html lang="en"> 
<head> 
«meta charset="utf-8"> 


«meta http-equiv-"X-UA Compatible" content-" IE-edge,chrome-1 "7 
«title» X53x «title» 
«meta name-"description" content=""> 
«meta name-'"viewport" content-"width-device-width; mitial-scale=1.0"> 
<link href-"css/global.css" type="text/css" rel="stylesheet" /> 
<link href-"css/login.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
<!--=S header --> 
«div class-"login head"> 
«div class-"head con wrap clearfix"> 
«div class-"head 1f 1"> 
«hl class-"logo f 1"> 
«a href="#"><img src-"img/login log.jpg"/></a> 
</h1> 
«div class-"welcome"»X*5& «/div- 
</div> 
«div class-"head rf r"> 
«span class-"f 1"> 如 和 需 帮助 ， 请 咨询 </span> 
<a lass-"f 1" href="#"> 在 线 咨 询 </a> 
</div> 
</div> 
</div> 
<!--=S header --> 
«div class="wrap"> 
«div class-"login con clearfix"> 
«div class-"login con If 1"> 
«a href="#"><img src-"img/login 1.jpg"/></a> 
</div> 
«div class-"login con rf r"> 
«h3 class="title"> 登 录 </h3> 
«div class-"login name input"> 
<label></label> 
«input id="new username" class-"login input j input" type="text" value=" 手 机 号 /会 员 名 / 
邮箱 " prompt = "手机 号 /会 员 名 /邮箱 " name="username" style="color: gray;"> 
«p class="onError"> 请 输入 账号 </p> 
</div> 
«div class-"login name input"> 
<label class="ps"></label> 
«input 1d="new passwd" class-"login input" type="password" name="passwd"> 
«p class="onError"> 请 输入 密 公 </p> 
</div> 


«div class-"login safes clearfix"> 


<label class-"safe Input > 
<input type="checkbox"><span> 安 全 控件 登录 </span> 
</label> 


E H A E AT j 


<a class-"forget" href" fff i Wl 5 html" ss i XE 2i m 3?«/a- 
</div> 
«div class-"login sub"> 

<a href=" 个 人 资料 .html"></a> 


</div> © 


«div class-"login way clearfix"> 
<a class-"regis f 1" hre 仁 "#"> 手 机 号 /邮箱 登录 </a> 
<a class-"logins f. r" hre 舍 "注册 .html"> 免 费 注 册 </a> 
</div> 
</div> 
</div> 
«div class-"login extra" 
«img src-"img/c5.png"/»«a href="#">" oK W M" WIEN </a> 
</div> 


说 明 : 这 里 对 Dreamweaver 设置 文本 域 的 属性 进行 说 明 。 
1) 在 “文本 域 ” 文 本 框 中 为 文本 域 指定 一 个 名 称 。 每 个 文本 域 都 必须 有 一 个 唯一 的 名 


称 。 表 单 对 象 名 称 不 能 包含 空格 或 特殊 字符 ， 可 以 使 用 字母 、 数 字 字 符 和 下 划 线 (-) 的 任 
意 组 合 。 请 注意 ， 为 文本 域 指定 的 标签 是 将 存储 该 域 的 值 (输入 的 数据 ) 的 变量 名 ， 如 


input 1 


NAT 


new username"， 这 是 发 送 给 服务 器 进行 处 理 的 值 ， 


€ o EGG 


字符 宽度 ”设置 域 中 可 显示 的 最 多 字符 数 。“ 最 多 字符 数 ” 指 定 在 域 中 最 多 可 输入 


的 字符 数 ， 如 果 保 留 为 空白 ， 则 输入 不 受 限 制 。“ 字 符 宽度 ” 可 以 小 于 “最 多 字符 数 "， 但 超 
出 字符 宽度 的 输入 不 被 显示 。 


3) 类 型 ”用 于 指定 文本 域 是 “单行 "、“ 多 行 ”还 是 “密码 ” 域 。 单 行文 本 域 只 能 显示 一 


行文 字 ， 多 行 则 可 以 输入 多 行文 字 ， 在 达到 字符 宽度 后 换行 ， 密 码 文 本 域 则 用 于 输入 密码 。 


4 )“ 初 始 值 ”指定 在 首次 载 入 表单 时 域 中 显示 的 值 。 例 如 ， 通 过 和 包含 说 明 或 示例 值 可 以 


指示 用 户 在 域 中 输入 信息 。 


(3) 登录 页面 的 CSS 样式 控制 代码 ， 保 存在 login.css 样式 表 文 件 中 
如 下 : 


。 上 其 体 的 样式 代 公 


.wrap {width:990px; margin:0 auto;} 

a(color:Z6c6c6c;! 

img (vertical-align:middle;) 

.focus 1 color:333; | 

.head conípadding:15px 0; height:60px;j 

login head hl (width:176px;padding-left:24px;) 

login head .welcome[float:left;border-left:lpx solid £ccc;color:2666;font-size:22px;height:35px;line- 
height:35px;margin-top: 13px;padding-left: 1Opx;vertical-align:middle;j 

login head .head rí[padding:15px 20px 0 0; color:#666; line-height:20px; 

login head .head r aífwidth:56px; height:20px; display:inline-block; background:url(../img/login.png) - 
65px 0 no-repeat; text-align:center; colorzZ333;margin-left:3px;j 

login con lfwidth:652px; height:360px; 

login con r{border:lpx solid Zcacaca; background:Zfafafa; padding:0 26px; height:358px; width:255px;] 
login con r .title (padding-top:28px; line-height:18px; font-size:14px; color:Z333;height:54px;j 


login name inputíposition:relative;width:254px; height:25px; margin-bottom:20px;j 
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login name input label{position:absolute;border-right:lpx solid Zdedede; left:0; top:0; *top:lpx; 
width:26px; height:25px; background:url(../img/login.png) no-repeat; } 

login name input .ps(background:urk(../img/login.png) -31px 0 no-repeat; } 

login name input span position:absolute;left:30px; top:0; line-height:25px; color:Zadadad; } 

login name input pposition:absolute;left:30px; top:26px;] 

login name input input[width:223px;padding:3px 0 3px 29px;border:lpx solid Zdedede;height:17px; 
line-height: 17px;} 

login safes{padding-top:24px; height:35px; position:relative; width:254px; line-height: 18px; } 

login safes label (vertical-align:middle; color:#aaa; } 

login safes input,.login safes span {vertical-align:middle;margin-right:5px;} 
login safes .forget{color:#6d6d6d;position:absolute; right:0; top:26px;} 

login sub aídisplay:inline-block; text-align:center; line-height:38px ; height:38px; 
background:url(../img/login.png) 0 bottom no-repeat; width:255px; 

login way padding-top:26px; 

login way a{color:#0066cc;} 

login extra íftext-align:right;padding:60px 0 14px;} 

login extra a,reg extra afmargin-left:3px; color:#0066cc;} 


(40 选择 染 单 栏 中 的 “文件 ”一 “保存 ”命令 ， 将 该 文档 保存 到 本 地 站 点 中 ， 完 成 用 户 
登录 的 页 面 布局 制作 。 


S 登录 成 功 个 人 页 面 


如 果 用 户 输 入 的 登录 信息 正确 ， 束 会 转 到 “个 人 资料 .html” 页 面 。 

(1) 在 Dreamweaver CC 2015 中 选择 亲 蛙 人 柱 中 的 “文件 ”一 “新 建 ” 命 令 ， 在 网 站 根 目 
录 下 新 建 一 个 名 为 “个 人 资料 .html” 的 网 页 并 保存 。 

(2) 用 类 似 的 方法 制作 登录 成 功 页 面 的 静态 部 分 ， 如 图 8-8 所 示 。 这 里 的 DIV 布局 没 
有 什么 特别 的 地 方 ， 因 此 代码 就 不 在 书 里 详细 列 出 了 。 


会 员 中 心 采购 。 供应 用 户 名 称 ~ 首页 
个 人 主页 消息 
bz 个 人 资料 隐私 设置 
您 的 基础 信息 。 ”头像 照片 。 ”教育 情况 。 工作 情况 
北河 E 族 s200 m 
账号 管理 e [0% , 完成 真实 姓名 hn10%。 | 
irm 亲爱 的 ABCD123 , 填 二 真实 的 资料 , SFEAREN. 
0708 
w:o | 
NS: | | 
性 别 : @ 男 ox 
生日 : | 年 | (B G | 
居住 地 : | ) | | 
ES: | | ] | | 


8-8 登录 后 的 个 人 资料 页 
(3) 布局 的 CSS 样式 表 保存 在 user.css 文件 中 ， 该 页 的 样式 表 代码 如 下 : 


X05 用 户 管理 系统 布局 


AA EA 

.picside {border-top: 1px solid #ebebeb;} 

.plcslde .p pic (background:Zf7f7f7; text-align:center; height: 144px; padding-top:26px;} 

.picside .name {padding-top: 10px; line-height: 16px; } 

.picside .name a{color:#b92120;} C 
.use info .companyintcon (width:720px; border:none; } 

.USe def.uindex seleborder:1px solid Zebebeb;] 

.use info(width:720px; overflow:hidden; color:#666;} 

.use info .info top,.use info info title,.ad same t[border-bottom:1px solid #cfcfcf, padding-top:10px; 
height:33px;! 

use info  .info top li,.ad same t li{width:113px;margin-right:7px; display:inline; — height:32px; 
border:1px solid #e9e9e9; text-align:center;line-height:32px; float:left; cursor:pointer;j 

.use info info top .on,ad same t.on([border-bottom:1px solid #fff; color:e50012;) 

.USe info info title li (float:left; line-height:32px; padding:O 17px;j 

.USe info info title .on{color:#333;} 

use info info main (padding-left:54px;j 

.use info dl [padding:5px 0;} 

.use info dt(float:left;width:74px; line-height:30px;j 

.use info dd(float:left; width:500px; position:relative;? 

.use info .datum (height:60px; 

.use info .datum dd (padding-top:10px; 

.use info .plan picífwidth:250px;height: lOpx;overflow:hidden;background:Zdcdcdc; ) 

.use info .plan pic span(ídisplay:inline-block;  height:12px;overflow:hidden; background:£a7d2a0; 
width: 1096; ) 

.use info .plan text|position:absolute; top:28px; left:5px;] 

.USe info .plan text p{border:lpx solid 7Zffc662; background:Zffffcc; line-height:24px; padding:0 
5px;color:25c85a3;] 

.use info .plan text span {color:#ce8145;} 

.use info lan text siposition:absolute;width:9px; height:6px; top:-4px; left:6px; 
overflow:hidden;background:url(../img/addm.png) 0 -102px no-repeat; } 

.use_info .hint{padding:0 0 20px; } 

.use_info .headPic .pic{width:80px; height:80px; overflow:hidden; border:3px solid #e6e6e6; margin- 
bottom:20px;} 

.use info.m sex dd{padding-top:7px; padding-top:Spx\9;} 

.Use info .m sex label vertical-align:middle; margin-right: 10px;j 

.use info.m sex input (margin-right:5px;vertical-align:middle; ) 

.use info .itextbgc,.use info .itext,.use info .itextbgl,.use info .itextbgr (width: 150px;) 

.use info .inputt1 {width:129px;} 

.use info .m btnípadding:25px 0 0 89px;} 

use info .m btn aldisplay:inline-block;width:90px; color:#fff, height: 34px;background:url (../1mg/ 
addm.png) no-repeat right 0; text-align: center; line-height:34px; 


ion. 找 回 密码 的 布局 


本 节 主 要 介绍 用 户 登 录 不 成 功 找 回 密码 的 页 面 的 设计 制作 ， 在 设计 和 布局 时 需要 按 找 回 
密码 的 步 又 来 设计 页 面 。 在 实例 中 需要 制作 “确认 账号 .html”、“ 选 择 验 证 方式 .html”、“ 手 机 
验证 码 .html”、“ 邮箱 验 证 .html” 以 及 最 后 的 “修改 密码 .html” 和 “ 找 回 密码 .html”6 个 步骤 
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JUD CC BRTATFH PLBS D TÉ 


确认 用 户 的 页面 用 于 当 用 户 发 现 输 入 密码 错 府 ， 需 要 找 回 目 己 的 密码 登录 时 ， 如 图 8-9 
所 示 。 当 需要 显示 找 回 密码 时 ， 在 第 1 个 步 台 “确认 账号 ”中 设置 背景 为 红色 、 日 子 ， 在 输 
入 文本 框 中 我 们 设置 了 “登录 名 ”和 “验证 码 ” 两 项 。 


易 购 网 登录 如 需 帮 助 ， 请 咨询 [在线 次 询 | 


1TSkill. com 


O 请 给 入 您 的 会 员 名 , 方便 我 们 开始 为 您 进行 服务 : 


LIEN emnet WN 0X0 


sss: [ma U E 
wm O e names 


下 一 步 


SREDE | AEA | ZO | KAR | 一 淘 | 阿里 妈妈 | 海宝 旅行 | 虾米 | 阿里 云 计算 | Yunos | 万 网 | 支付 主 | 来 往 


8-9 “确认 账号 .html” 布 局 效果 


(1) 在 Dreamweaver CC 2015 中 创建 HTMLS 新 文档 ， 并 保存 为 “确认 账号 .html”， 使 
用 DIV 的 布局 核心 代码 如 下 : 


<!--=S header --> 
«div class="wrap"> 
<h3 class="forget top clearfix"> 
<s></s><span class="f 1"> 请 输入 您 的 会 员 名 ， 方 便 我 们 开始 为 您 进行 服务 ，</span> 
</h3> 
«div class-"forget nav"> 
«ul class-"steps-info clearfix"> 
<li class-"on' 1 fif i Wk «ili 
<li class=""><s></s>2. 选 择 验 证 方式 <i></i></ 谊 
<li class=""><s></s>3. 验 证 /修改 <i></i></li> 
<li class="]astli"><s></s>4. 完 成 </i> 
</ul> 
</div> 
«div class-"forget con" 
«ul class="fAccount"> 


«]i» 
«strong» 32K 44: </strong> 
«input type="text" class-"j input" value=" 手 机 号 /会 员 名 /邮箱 "> 
<span></span> 

</li> 


<li> 


(2) 
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«strong» Je uf: </strong> 

«input type="text" class-"vcode" value=""> 

«img src-"img/nubcode.jpg"/7 

<span> 看 不 清 ? «a hre 伟 "加 > 换 一 张 </a></span> e 


EA 


«span class-"passimg code"></span> 
</li> 
<lļi> 
<a href" ARRUE 3X.html" class="fAccount_next" ></a> 
</li> 
</ul> 
</div> 


</div> 
Tff A E R ERRI TETE login.css 样式 表 文 件 里 ， 具 体 的 样式 代码 如 下 : 


诺 态 记 和 密码 -确认 账号 */ 
.forget top{border-bottom:1px solid Zccc; line-height:36px; padding:12px 0 0 12px; color:#000;} 


forget top sífloatleft; width:l9px; height: 19px; background:url(../img/passwordl.png) no-repeat; 
margin:Opx 6px 0 0;} 

forget nav{padding:20px 0 10px;} 

forget nav .steps-info (color:2666;line-height:30px;) 

forget nav lifposition:relative;float:left;width:243px;text-align:center; height:330px;margin:0 4px 0 
O;background:Zdedede; font-size:16px;) 

forget nav s,.forget nav 1(width:O;height:0;font-size:0;line-height:O;position:absolute;top:O;border:15px 
solid Zfff;j 

forget nav s(border-color:Zdedede Zdedede #dedede transparent; border-left-style:dashed;left:-16px;] 
forget nav i(border-color:7fff #fff ?fff ?dedede; border-right-style:dashed; right:-16px;j 

forget nav .on background: b92120;color:Zfff; } 

forget nav .on sfborder-color:b92120 #b92120 #b92120 transparent; 

forget nav .on if[border-left-color:£b92120;border-left-style:solid;right:-15px; 

forget nav .lastli (width:249px;margin:0;) 

forget con(border:1px solid Zd4d4d4; margin-bottom: 10px; } 

.fAccount ( height:220px;padding:69px 0 0 325px;} 

.fAccount lif height: 32px; padding-bottom: 20px; position: relative; } 

.fAccount li strong {color: #333; display: inline-block; font-size: 14px; font-weight: normal; line-height: 
32px; padding-right: 5px; text-align: right;vertical-align: top;width: 100px;} 

.fAccount li input 1 border: 1px solid Zaeaeae; color:Zccc; height: 16px; line-height: 16px; padding: 7px; 
vertical-align: top; width: 254px} 

.fAccount li .focus1 color:zZ333; | 

.fAccount li .vcode (width: 120px; } 

.fAccount li span 1 display: inline-block; height: 32px; line-height: 32px; max-width: 255px; overflow: 
hidden; padding-left: 22px;vertical-align: top; 

fAccount li .onError(background:url(../img/error.png) 0 center no-repeat;color: 7e40309;font- 
weight:normal;j 

fAccount li .onFocus([background:url(./img/focus.png) 0 center  no-repeat;color:26363063;font- 
weight:normal;! 


fAccount li .onCorrect(background:url(./img/right.:png) 0 center no-repeat;color: 77fc169;font- 
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welght:normal;} 


.fAccount next{ background:url(../img/password2.png) no-repeat; width:88px; height:36px; display: 
block; margin-left:105px;} 


8.4.2 玩 择 找 回 万 式 


“选择 验证 方式 .html” 是 单 击 “确认 账号 .html” 页 面 之 后 打开 的 验证 的 第 2 步 操作 ， 本 
实例 设计 的 样式 如 图 8-10 所 示 。 目 前 ， 国 内 在 注册 方式 的 选择 上 主要 有 手机 注册 和 邮箱 注 
册 ， 因 此 在 找 回 密码 的 时 候 同 样 要 选择 这 两 种 方式 进行 。 


易 购 网 登录 如 需 帮助 ， 请 咨询 [在 线 咨询 | 


17Skill. com 


0 请 输入 您 的 会 员 名 ， 方 便 我 们 开始 为 您 进行 服务 : 


zi 通过 绑 定 的 手机 IE 
TECHET SUE 5 


通过 绑 定 的 邮箱 ES 
[d 安全 链接 将 发 送 到 你 绑 定 的 邮箱 


SREDE | 海宝 网 | ZS | Eu | 一 淘 | 阿里 妈妈 | 海宝 旅行 | 虾米 | 阿里 云 计算 | Yunos | 万 网 | 支付 宝 | 来 往 


8-10 “选择 验证 方式 .html” 布 局 效果 


(12) 在 Dreamweaver CC 2015 中 创建 HTMLS 新 文档 ， 并 保存 为 “选择 验证 方 
式 .html”， 使 用 DIV Bg fd F: 


<!--=9 header --> 
«div class="wrap"> 
«h3 class-"forget top clearfix"> 
«s»«/s»«span class="f 1l"> 请 输入 您 的 会 员 名 ， 方 便 我 们 开始 为 您 进行 服务 : </span> 
</h3> 
«div class="forget nav"> 
«ul class-"steps-info clearfix"> 
<li class="">1 fff i Wk ci ili 
<li class="on"><S></S>2. 选 择 验证 方式 <i></ 这 </i> 
<li class=""><S></S>3. 验 证 /修改 <i></i></i> 
<li class="lastli"><s></s>4. FE HX </li> 
</ul> 
</div> 
«div class-"fAccount2 list clearfix"> 
«span class-"fAccount2 list logol"></span> 
«div class-"fAccount2 list c" 
«p class='"listl"> 通 过 绑 定 的 手机 </p> 
«p class='"list2 必 需要 您 绑 定 的 手机 可 进行 短信 验证 </p> 
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</div> 
<a href=" FHL uEfd.html" class="fAccount2 list btn"></a> 
</div> 
<div class-"fAccount2 list clearfix mt90"> 
«span class-"fAccount2 list logo2"></span> > 
«div class="fAccount2 list c"> 
«p class="listl"> 通 过 绑 定 的 邮箱 </p> 
«p class="list2"> 安 全 链接 将 发 送 到 你 绑 定 的 邮箱 </p> 
</div> 
«a hre 伍 "邮箱 验证 .html" class="fAccount2 list btn"»«/a» 


</div> 


(2)“ 选 择 验 证 方式 .html” 页 面 的 样式 代码 同样 储存 在 login.css 样式 表 文 件 里 。 具 体 的 
样式 代码 如 下 : 


[SS ARR ETE ASI 

fAccount2 listfheight:70px; padding:28px 0 0 265px; width:723px; border:lpx solid Zd4d4d4; 
margin-bottom: 1 Opx; } 

fAccount2 list logol{ float:left; width:79px;height:40px; background:url(../img/password3.png) 6px 
0 no-repeat;) 

.fAccount2 list logo21 float:left; width: 79px;height:40px; background:url(../img/password4.png) Opx 0 
no-repeat; } 

.fAccount2 list c1 float:left; width:310px; } 

.fAccount2 list c .listl | line-height:26px; font-size: 14px; color:#000; font-weight:bold; | 
fAccount2 list c .list21 line-height:14px; font-size:12px; color:#999; | 

fAccount2 list btn{  float:ileft;margin-top:6px; ^ background:url(./img/password5.png) no-repeat; 
width:88px; height:36px; } 

.mt90{ margin-bottom:90px; } 


(3) 在 选择 手机 验证 之 后 要 进入 下 一 步 的 具体 手机 验证 页 耐 ， 如 图 8-11 所 示 。 在 
Dreamweaver CC 2015 中 创建 HTMLS 新 文档 ， 并 保存 为 “手机 验证 码 .html”。 使 用 DIV 的 
布局 代码 如 下 : 


易 购 网 如 需 帮 助 ， 请 咨询 | 在线 咨 询 
17Skill. com 登录 


Q 请 给 入 您 的 会 员 名 ， 方 便 我 们 开始 为 您 进行 服务 : 


© 短信 验证 码 已 经 发 送 到 手机 186***8098 


请 输入 短信 中 的 验证 码 ”没收 到 短信 验证 码 ? 


短信 验证 码 
2 


SREDE | 海宝 网 | ZS | EE | 一 淘 | 阿里 妈妈 | 海宝 旅行 | SRK | 阿里 云 计算 | Yunos | 万 网 | 支付 全 | 来 往 


图 8-11 “手机 验证 码 .html” 布 局 效果 


HIM CSS rJavascript BESRAATHNE 


«div class="wrap"> 
«h3 class-"forget top clearfix"> 
<s></s><span class="f_ 1"> 请 输入 您 的 会 员 名 ， 方 便 我 们 开始 为 您 进行 服务 ，</span> 
</h3> 
«div class-"forget nav" 
«ul class-"steps-info clearfix"> 
<li class-"on"71.fff i Wc li 
<li class="on"><s></s>2. 选 择 验 证 方式 <i></ 记 </ 这 
<li class="on"><s></s>3. 验 证 /修改 <i></ 谊 </1i> 
<li class="lastli"><S></S>4. 完 成 </li> 
</ul> 
</div> 
<div class="forget_con"> 


zi 


«ul class-"amendPhone"- 
<li class-"li: 1"> 
«div class-"clearfix"^ 
<1></1> 
<div class="f 1"> 
«p class="text1"> 短 信 验 证 人 码 已 经 发 送 到 手机 <span>186****8098</span></p> 
«p class="text2"> 请 输入 短信 中 的 验证 人 <a hre 伍 "#"> 没 收 到 短信 验证 人 码 ?</a></p> 
</div> 
</div> 


</li> 

<li class="li_2"> 
<strong> 49 fii Je uE fidi /strong» 
«input type-" text" 


</li> 
<li class="li_3"> 
<a class="btn" href=" $R JE] 413. htmI" F —2</a> 
<a class="pre" hre 伟 "选择 验证 方式 .html"> 上 一 步 </a> 
</li> 
</ul> 


</div> 
(4)“ 手 机 验证 码 .html” 页 面 的 样式 代码 储存 在 login.css 样式 表 文 件 里 。 有 具体 的 样式 代 
fu F: 
US ETE CEA US 


.amendPhone ( height:232px;padding:56px 0 0 285px;1 
.amendPhone .li 1 [height:50px; padding-bottom:27px;j 


.amendPhone .li 1 i.amendEmail .li 1 i,.amendSure .li 1 1{float:left; width:5O0px; height:50px; 
background:url(../img/amendl.png) no-repeat; margin:0 15px 0 20px;} 

.amendPhone .li 1 .textl,.amendEmail .li 1 .textl[font-size:18px; color:7333; font-weight:bold; line- 
height:24px;padding-top:4px; } 

.amendPhone .li 1 .textl span{color:#b92120;} 

.amendPhone .li 1 .text2(color:2999;1 

.amendPhone .li 1 .text2 a(color:z0066cc; margin-left: 15px;} 
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.amendPhone .li 2 strong{font-weight:normal; line-height:36px; float:left; width:80px; } 
.amendPhone .li 2 input{border:1px solid #aaa;width:258px; height:34px;j 
.amendPhone .li 31[padding:30px 0 0 80px; line-height:36px;) 


.amendPhone .li 3 a..amendEmail .1 2 a{color:#b92120; font-size: 14px;j 
.amendPhone .li 3 .btn.amendEmail .li 2 .btnídisplay:inline-block;margin-right:20px; width:88px; > 
height:36px; line-height:36px; text-align:center; color:#fff, background:url(../img/amend2.png) no- 
repeat; } 

(5) 如 采 单 击 选择 的 邮箱 验证 ， 则 打开 “邮箱 验证 .html” 页 面 ， 如 图 8-12 所 示 。 在 
Dreamweaver CC 2015 中 创建 HTMLS 新 文档 ， 并 保存 为 “邮箱 验证 .html”， 使 用 DIV 的 布 
局 代码 如 下 : 


1TSkill 


[g] 55 登录 3088955 , 请 咨询 | EE] 


O 请 六 入 你 的 会 员 名 , 方便 我 们 开始 为 您 进行 服务 : 


邮件 已 发 送 


ELOS. eon 查阅 来 着 易 批 的 邮件 ， 
点 击 邮 件 中 的 涟 接 重 识 您 的 登录 密码 


TE t$ 


没有 收入 

* 请 先 检查 是 否 在 垃圾 邮件 中 。 如 果 还 未 收 到 ， 请 重新 发 送 邮件 
请 重新 发 送 邮件 

* 还 是 没收 到 ? 请 选择 其 他 找 回 方式 


SREDE | SEM | ZS | EXE | 一 淘 | 阿里 妈妈 | SERT | 是 米 | 阿里 云 计算 | Yunos | 万 网 | 支付 全 | 来 往 
8-12 “邮箱 验证 .html” 布 局 效果 


—M 


«div class="wrap"> 
«h3 class-"forget top clearfix"> 
<s></s><span class-"f 1"> 请 输入 您 的 会 员 名 ， 方 便 我 们 开始 为 您 进行 服务 ， </span> 
</h3> 
«div class-"forget nav" 
«ul class-"steps-info clearfix"> 
<li class-"on"1.ff i We iili 
<li class="on"><S></S>2. 选 择 验证 方式 <i></i></i> 
<li class="on"><S></S>3. 验 证 /修改 < 这 </ 记 </i> 
<li class="lastli"><S></S>4. 完 成 </li> 
</ul> 
</div> 
«div class-"forget con" 
«ul class-"amendEmail"^ 
<li class-"h 1" 
«div class-"clearfix" 
«je 
«div class-"f I" 
«p class='"textl"> 邮 件 已 发 送 </p> 


"m. 


2 
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«p class="text2"> 请 到 <a hre 伍 "#">3098***(@qq.com</a> 查 阅 来 着 易 批 的 邮件 ，</p> 
«p class="text2"> 点 击 邮件 中 的 链接 重 设 您 的 登录 密码 </p> 
</div> 

</div> 
</li> 
<li class="li_2"> 
<a class="btn" href=" fR JE] 413. htmI" P —27«/a» 
<a class="pre" hre 伟 "选择 验证 方式 .html"> 上 一 步 </a> 
</li> 
<li class="li_3"> 
<h3> 没 有 收 到 邮件 ? </h3> 
<p>。 请 先 检 答 是 否 在 垃圾 邮件 中 。 如 果 还 未 收 到 ， 请 重新 发 送 邮 件 </p> 
«div class="send"><a hre 伟 "> 请 重新 发 送 邮 件 </a></div> 
<p>“。 还 是 没收 到 ? «a hre 伍 "#"> 请 选择 其 他 找 回 方式 </a></p> 
</li> 


</ul> 
</div> 


C6) "HETESS UE.html" W APERAR E login.ess 样式 表 文 件 里 ， 具 体 的 样式 代 


hd F: 


/* UTE MRE 

.amendEmail (height:280px;padding:52px 0 0 303px;font-family:" 宋 体 ";} 

.amendEmail .li 1 1(margin-top:Apx;margin-left:2px; 

.amendEmail .li 1 .textl {padding:0;} 

.amendEmail .li 1 .text2{color:#999; line-height: 18px;j 

.amendEmail .li 1 .text2 a{color:#0066cc;} 

.amendEmail .li 21padding:18px 0 12px 72px;} 

.amendEmail .li 2 .btn(width:120px; background:url(../img/amend3.png) no-repeat; } 
.amendEmall .li 3{border:lpx solid Ze8d6ae; width:378px; padding:l4px 0 0 18px; height:127px; 
background:#fff6db; } 

.amendEmail .li_3 h3 {color:#050200; font-weight:bold; line-height:22px;j 

.amendEmail .li_3 p{color:#635d5d;line-height: 18px; } 

.amendEmail .li_3 .send{padding:10px 0 10px 15px;} 

.amendEmail .l1 3.send a{display:inline-block; background:url(../img/amend4.png) no-repeat; 
width: 120px; height:26px; line-height:26px; text-align:center; color:#303030;} 

.amendEmail .li_3 a{color:#0066cc;} 


Je mp 修改 和 找 回 密码 


对 于 上 面 的 页 面 需要 进行 密 但 修改 ， 并 完成 最 后 的 找 回 密码 操作 ， 制 作 的 页 面 有 两 个 ， 
分 别 为 “修改 密码 .html” 和 “ 找 回 密码 .html”。。 这 两 个 页 面 的 前 端 DIV 布局 也 没有 特别 的 地 
方 ， 比 较 简 单 ， 这 里 主要 介绍 一 下 样式 的 设计 。 

(1)“ 修 改 密码 .html” 的 具体 效果 如 图 8-13 所 示 ， 样 式 代码 储存 在 login.ess 样式 表 文 件 
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E, HREAN P: 
2n 登录 如 需 才 助 ， 请 咨询 | 在 线 咨询 | 


O 请 埠 入 你 的 会 员 名 , 方便 我 们 开始 为 您 进行 服务 : 


4x 


v 您 的 验证 已 经 成 功 通 过 ， 请 立即 修改 您 的 登录 密码 
BOE: 
请 确认 密码 : 1 | 


全 球速 变通 | SED | Pë | KAS | 一 淘 | 阿里 妈妈 | 淘宝 旅行 | K | 阿里 云 计算 | Yunos | 万 网 | 支付 全 | 来 往 


图 8-13 “修改 密码 .html” 页 面 的 布局 效果 


PE PUER] 

modify pass tit{ height:50px; line-height:SO0px; font-size:l8px; color:#333; padding-left:65px; font- 
weight:bold; background:url(../img/amendl.png) no-repeat; width:400px; margin:46px auto 0; } 
modify pass .setPsbox (padding-bottom:0; ) 

modify pass{ margin:20px 0 0 255px;j 

modify pass li{ height: 32px; padding-bottom: 20px; position: relative; } 

.modify pass li strong {color: #333; display: inline-block; font-size: 14px; font-weight: normal; line- 
height: 32px; padding-right: 5px; text-align: right;vertical-align: top;width: 100px;} 

.modify pass li input { border: 1px solid #aeaeae; color:#ccc; height: 16px; line-height: 16px; padding: 
7px; vertical-align: top; width: 254px} 

.modify pass li .focus{ color:#333; | 

.modify pass li span { display: inline-block; height: 32px; line-height: 32px; max-width: 255px; overflow: 
hidden; padding-left: 22px;vertical-align: top;} 

.modify pass li .onError(background:url(../img/error.png) 0 center no-repeat;color: #e40309;font- 
weight:normal; } 

.modify pass li .onFocusíbackground:url(../img/focus.png) 0 center no-repeat;color:#636363;font- 
weight:normal; } 

.modify pass li .onCorrect{background:url(../img/right.png) 0 center no-repeat;color: #7fc169;font- 
weight:normal; } 

.modify pass .psBox {padding:5px 0 5px 108px;*padding-left: 105px; height:21px;} 

.modify pass .psStrong divífloatleft; width:88px; height:21px; line-height:21px;margin-right:3px; 
color:#fff; text-align:center; background:#eee; } 

.modify pass .psStrong .on {background:#b92120;} 

modify pass btn{width: 120px; background: url(../img/amend3.png) no-repeat; margin:0 0 20px 365px; 
display:block; height:36px; color:#fff, line-height: 36px; text-align:center;; 


(2)“ 找 回 密 码 .html” 的 设计 效果 如 图 8-14 所 示 ， 样 式 代 人 码 同 样 储存 在 login.ess 样式 表 
文件 里 ， 上 其 体 的 样式 代码 如 下 : 


fo HTML54*CSS* JavaScript 网 页 布局 从 入 门 到 精通 


易 购 网 如 需 帮 助 ， 请 咨询 | 在线 咨询 | 
1TSkill. com 登录 


O 请 验 入 您 的 会 员 名 ,方便 我 们 开始 为 您 进行 服务 : 


4 完成 


© 您 的 登录 密码 已 经 重新 设置 ， 请 妥善 保管 


FoF 


SRESER | 淘宝 网 | ZO | 聚 划算 | 一 淘 | 阿里 妈妈 | 海宝 旅行 | 虾米 | 阿里 云 计算 | Yunos | 万 网 | 支付 宇 | 来 往 
图 8-14 “ 找 回 密码 .html” 页 面 的 布局 效果 


/# 修 改 完成 六 
.amendSure {height:184px;padding:64px 0 0 304px;font-family:" 宋 体 ";} 
.amendSure .li 1 i{margin-left:0;} 


.amendSure .li 1 .textl (color:Z333;line-height:50px; font-size: 18px; font-weight:bold; j 
.amendSure .li 2(padding:30px 0 0 140px;j 

.amendSure .l1 2 atdisplay:inline-block; width:100px; height:36px; text-align:center; line- 
height:36px;color:Zfff;background:url(../img/amend5.png) no-repeat; font-size: 14px; } 


全 此 ， 用 户 管 理 系统 的 种 用 功能 都 已 经 设计 并 布局 到 位 ， 设 计 者 如 末 需 要 将 其 应 用 到 其 


他 网 站 上 ， 只 需要 与 设计 的 页 面 配 合 ， 修 改 一 些 相 关 的 文学 说 明 及 背景 
立 用 户 管理 系统 的 设计 制作 。 


FRAR, Wen, AEIR 


La wa 


Es 


9 em ”购物 车 系统 市 局 


本 半 学 习 购 物 车 系统 相关 页 面 的 布局 ， 购 物 车 系统 相对 于 其 他 网 页 系统 的 布局 会 难 一 
些 ， 除 了 一 些 静 态 的 DIV+CSS 布局 外 ， 还 要 涉及 购物 车 下 订单 时 的 数据 统计 、 文 字 信 息 的 
即时 交互 开 太 。 前 端 布 局 工程 师 需 要 深入 了 解 购物 车 从 下 订单 到 结算 付 球 的 整个 流程 。 本 章 
主要 介绍 使 用 DIV+CSS+JavaScript 进行 购物 车 系统 前 合 开发 的 方法 ， 将 介绍 购物 车 系统 的 
前 全 设计 以 及 几 个 功能 模块 的 开发 。 


s VAVBEZE II 


本 章 学 习 重 点 : 


购物 车 系统 规划 方法 
掌握 购物 车 的 订单 流程 
产品 列表 的 展示 设计 


产品 详情 页 的 展示 设计 
购物 车 页 面 的 布局 
确认 订单 页 面 的 布局 
付款 和 完成 页 面 的 布局 


"s HTML5-4*CSS*-* JavaScript CELITNBELTI. 


购物 车 系统 规划 


为 了 系统 地 介绍 使 用 DIV+CSS 布局 电子 商务 网 站 的 过 程 ， 本 草 以 模拟 实用 的 电子 商城 
网 站 的 购物 车 建设 过 程 为 例 ， 详 细 介 绍 网 站 拥有 一 个 网 上 购物 系统 必须 做 的 其 体 工作 。 在 进 
行 大 型 系统 网 站 开发 之 前 首先 要 做 好 开发 前 的 系统 规划 ， 方 便 前 端 设 计 师 进行 整个 网 站 的 设 
计 与 布局 。 


,有 站 购物 车 系统 功能 


电子 商城 实用 型 网 站 是 在 网 络 上 建立 一 个 虚拟 的 购物 商场 ， 让 访问 者 在 网 络 上 购物 。 网 
上 购物 以 及 网 上 商店 的 出 现 避 免 了 挑选 商品 的 烦 开 过 程 ， 让 人 们 的 购物 过 程 变 得 轻松 、 快 
捷 、 方 便 ， 很 适合 现代 人 快 节 奏 的 生活 。 同 时 又 能 有 效 地 控制 “商场 ”运营 的 成 本 ， 开 尽 了 
一 个 新 的 销售 渠道 。 本 实例 使 用 DIV+CSS+JavaScript 直接 用 手写 程序 完成 ， 完 成 的 带 购物 
车 的 “产品 详情 页 .html” 如 图 9-1 所 示 。 


WA 
> Q fi 口 file/WD:/yigou/ 产 品 详情 页 .html 
供应 商 信息 2016 夏 装 新 款 欧美 大 牌 简约 OL 纯 色 金属 扣 装 饰 修 身 短 袖 连 衣 裙 Q8025 


ax A = 


广东 环 博 网 络 科技 有 限 公司 


起 批量 ( 件 ) 价格 

联系 人 : 陈 经 理 
供应 等 级 ; X 50.00/ 
经 营 模式 : 经 销 批发 [以 认证 ] X 38.00/& 
所 在 地 区 : 广东 深圳 市 南山 区 

26 X 50.00/« 
企业 认证 信息 : 
acr LE css : EB: ¥40.00/ 06 : 59 : 34 

M/S VW E 

gous 价格 : ¥99.00/ 件 
满意 度 :4.9 


发 货 / 物 流 : ”广东 东莞 至 北京 快递 ¥10 货 运 ¥42 
成 交 /评价 : ”2 双 成 交 暂 无 评价 


B 收藏 旺销 


量 为 3 人 + 235 i 收藏 产品 (100 
产品 名 TERRE. 80*200 2480.00 1000 0 - 采购 清单 < 详 单 
价 到 (Ex 80*200 48 1000 
l 框架 床 80*200 2480.00 1000 0 共 0 件 | 100.00 元 
EEG 框架 床 180*200 2480.00 1000 0 xxm | 
框架 床 80*200 2480.00 1000 0 
| — 框架 床 80*200 2480.00 1000 0 - 


9-1 产品 详情 页 效果 


市 购物 车 的 电子 商城 主要 实现 的 功能 如 下 : 

D 开发 了 强大 的 搜索 以 及 高 级 得 询 功 能 ， 能 够 快捷 地 找到 感 兴趣 的 商品 。 

2) 采取 会 员 制 你 证 交易 的 安全 性 。 

3) 流畅 的 会 员 购 物流 程 ， 即 浏览 、 将 商品 放 入 购物 车 、 去 收银 合 。 每 个 会 员 有 目 己 专 
用 的 购物 车 ， 可 随时 订购 目 己 中 意 的 商品 并 结账 完成 购物 。 购 物 的 流程 是 指导 购物 车 系统 程 
序 编 写 的 主要 依据 。 

4) 完善 的 会 员 中 心服 务 功能 ， 可 随时 但 看 账目 明细 、 订 单 明 细 。 

5) 设计 会 员 价 商品 展示 ， 能 够 显示 企业 近期 促销 的 一 些 会 员 价 商品 。 

6) 后 从 管理 模块 可 以 通过 使 用 本 地 数据 库 保证 购物 订单 安全 、 及 时 、 有 效 地 处 理 ， 强 


Sont OVE Gis 


大 的 统计 分 析 功 能 ， 便 于 管理 者 及 时 了 解 财务 状况 和 销售 状况 。 
7) 前 中 布局 使 用 JavaScript 实现 产品 订单 的 动态 统计 功能 ， 方 便 后 端 程序 员 的 开 友 。 


"D2 风物 车 系统 流程 "^ 
将 要 建设 的 购物 车 系统 主要 由 以 下 几 个 购物 流程 组 成 : 


C) 前 侣 网 上 销售 模块 “产品 列表 页 .html” 是 指 客 户 在 浏览 左 中 所 看 到 的 直接 与 店主 面 
对 面 的 销售 程序 ， 包 括 浏 贤 商 品 、 搜 索 丙 品 等 功能 ， 本 实例 的 “产品 列表 页 .html” 如 图 9-2 
Wiz. 


x 
€ > Q fi | 口 file///D:/yigou/ 产 品 列表 页 .html av B= 
欢迎 来 到 批发 市 场 联 盟 ! ”请 登录 ”免费 注册 我 的 会 员 中心 ~ | 进货 单 UE. 我 星 供应 商 | 客服 中 心 ~ | 网 站 导航 ~ 人 


产品 市 场 求购 商铺 资讯 
BM s oC $ 
17Skill. com M HE : 17783 FRSE RE AAP CR FA TR FA 


大 红 门 批发 市 场 > 女装 > 毛 农 共 找到 15636 家 公司 


男装 Th HE ”针织 ”棉衣 ka PaE RAK 风衣 PR BẸ 更 多 ~ 
女装 TA H HAK RR 45 PAR RAR 风衣 卫衣 马甲 更 多 v 
童装 TA HE HAK RR ccm PHE RR AR 卫衣 Gm 休闲 更 多 ~ 


CETUR: WASE WIE 个 性 童鞋 


综合 A^. HB, 价格 + 所 在 地 区 Y BRER ' 


9 北京 丰台 热门 店铺 
mm m 可 - " = m. guuBierdRM RES 


周 成 六 :25 笔 

EE : 100% 

muB Et RESP 
衣 厂 服饰 批发 Vtw9 
周 成 交 : 25 笔 

满意 率 : 100% 
洪山 县 徐 氏 服饰 制 REFS 
A Etait -— 


图 9-2 ”产品 列表 页 .html 
(2) 网 上 销售 模块 “产品 详情 页 .html” 由 后 人 台 录 入 产品 的 具体 信息 ， 前 人 台 通 过 一 个 页 面 


全 和 面 展 示 所 销售 商品 的 所 有 数据 。“ 产 品 详情 页 .html” 页 和 面 如 图 9-3 所 示 ， 页 面 上 显示 了 
“购物 车 ”， 并 且 显 示 了 所 有 的 产品 属性 。 


[s 产 品 详情 页 x 有 
€ > C 省 |Dfile//D:yigou/ 产 品 详情 页 him |  &v* "HS 
欢迎 来 到 批发 市 场 联盟 ! ”请 登录 “免费 注册 我 的 会 员 中 心 v | 购物 车 v | kakv! 我 是 供应 商 “| 客服 中 心 | 网 站 导航 v 


YBKCP es con 
优 百 客 诚 品 品牌 原 厂 
原创 品牌 实物 拍摄 ,货源 源头 


会 员 专 区 清仓 打包 EME 公司 动态 公司 档案 联系 方式 


供应 商 信息 2016 夏 装 新 款 欧美 大 牌 简约 OL 纯 色 全 属 扣 装 饰 修身 短 袖 连 衣 裙 Q8025 


tT LEY nE 
广东 环 博 网 络 科技 有 限 公司 起 批量 ( 件 ) 价格 


X 50.00/44 
经 营 模式 : 经 销 批 发 [以 认证 ] ” X 38.00/et 
所 在 地 区 : 广东 深圳 市 元 山区 

¥ 50.004 
企业 认证 信息 : 
国企 业 详 地 认证 国 买 家 保障 
满意 度 :4.9 


促销 : : ¥40.00/ 06 : 59 : 34 
价格 ; Y99.00/ 件 
RAME: 广东 RR 至 北京 RENATA 


9-3 ”产品 详情 页 .html 


fo HTML5*CSS* JavaScript 网 页 布局 从 入 门 到 精通 _ 


(3) 客户 购买 完 商 品 后 ， 系 统 目 动 分 配 一 个 购物 号 但 给 客户 ， 以 方便 客户 随时 碍 询 订单 
的 处 理 情况 ， 了 解 现在 货物 的 状态 。 客 户 订 购 后 打开 的 第 1 个 页 面 即 “购物 车 .html”， 如 
图 9-4 所 示 。 


x 
€ > Ç fi Dfile///D//yigou/R3f]5k.html 


购物 车 


进货 车 状态 ( 2/ 100) 货品 金额 总 计 ( 不 含 运费 ) : 0 元 
货品 单价 (元 ) 金额 (元 ) 
D US: 深圳 市 主 安 区 沙 并 洛 会 服 关 厂 
厂家 批发 夏 和 手 塌 歌 旺 版 h 5-9 件 ; 100.00 


连衣裙 淑女 二 长 款 肆 纺 禄 爆 


- (pn 10-2944 : 90.00 


=30 件 : 80.00 


D HAs: 深圳 市 宝安 区 沙井 洛 鲍 服装 厂 
Il on IET DE 5-9% : 100.00 
连衣裙 濒 女 中 长 款 委 纺 裕 爆 ; f (-I31*) 
颜色 ; 黑白 RT:S E00 O mBxifU ÉPESÓU 


5-94 : 100.00 
失效 
10-29 件 : 90.00 


o ex Beni WEGE 


9-4 ”购物 车 .html 
(4) 接 下 来 在 购物 车 里 确认 产品 的 数量 ， 然 后 单 击 “ 确 认 下 单 ” 按 钮 进入 “确认 订 
单 .html” 页 面 ， 如 图 9-5 所 示 。 客 户 在 这 里 能 输入 收 货 地 址 ， 并 最 后 核对 购物 车 中 商品 的 数 
量 和 统计 的 价格 。 


D 确认 订单 x Wu 
€ > Q fi D file///D;/yigou/i&i T &.html 
购物 车 


店铺 ; 深圳 市 主 安 区 沙 共 污 会 服装 厂 
厂家 批发 夏季 爆 款 昔 版 
短视 连 衣 福 淑女 中 长 款 
人 7E: RA RYI:S 


SERES: JURER 


-15.00 


店铺 合计 ( 会 运费 ) : 75.00 


积分 500 个 , 可 使 用 100 个 


应 付 总 计 : ¥240.00 


RoEE: 北京 北京 市 朝阳 区 
KAA : 环境 天 下 13800138000 


9-5 确认 订单 .html 


(5) 在 “确认 订 早 .html” 页 面 中 单 击 “提交 订单 ”按钮 ， 接 下 来 进入 “ 付 球 .html” 页 
B, HAE] 9-6 所 示 。 客 户 能 合 看 订单 的 详 悄 ， 确 认 后 进入 最 后 的 文 付 环节 ， 对 于 前 端 设 
计 和 布局 工程 师 而 言 ， 需 要 提供 多 种 收 球 方式 ， 例 如 可 以 选择 不 同 的 银行 代 收 ， 文 付 宇 等 工 
其 ， 在 布局 的 时 候 只 需要 将 收 球 方式 的 布局 设计 好 即 可 。 


M 
i ZEE A TN 一 
o9 00 9 906 e ee 。 e e 6 6 0q 
À 4 A dh A & A GS 
D» D © e OO。 ee *  ， e e o © p wu» Uu uy 


MOLOI K E RE EEEE 


- o 
| € > QC fi D file///D/yigou/t1fxhtml 


5» . 


UFISBBHbEIRAGÁE: 0 


共 合 并 了 2 笔 订单 ”订单 详情 isses Y 240.00 x 


400-6688-038 | $8857» 


OBsHE ^ Ossum 


如 果 交 易 金额 大 于 网 银 限额 ， 建 议 使 用 。 易 购 网 支付 平台 充值 支付 >> 


付款 遇 到 问题 : 

1 选择 易 批 收 很 台 担 保 交易 ， 有 何 保障 ? 
| S: 在 易 购 网 平台 进货 时 ， 付 款 选择 易 批 收 殷 台 做 担保 交易 ， 货 款 并 未 直接 付 给 卖家 ， 而 是 付款 到 易 批 收 银 台 ， 您 收 到 货物 签收 无 误 后 ， 再 次 确认 收 货 时 ， 订 单 款项 才 会 结算 给 南 家 ， 相 当 于 货 到 付款 咏 。 
f 


| 2 没有 网 很 怎么 办 ? 
4$ ; 如 果 您 没有 网 很 ， 推 荐 您 使 用 快捷 文 付 来 选择 柜 应 急行， 轻松 寺 成 付款 您 还 可 以 通过 文 付 宝 、 百 度 钱包 等 第 三 方 文 付 平台 来 付款 ， 


9-6 ” 付 丈 .html 


(6) 最 后 单 击 “下 一 步 ” 按 钮 ， 进 入 “完成 .html” 页 面 ， 如 图 9-7 所 示 ， 全 此 完成 了 基 
本 的 付 球 流程 。 


x 


| ^ — QC fi D file///D/yigou/sE&s html 


| 请 登录 ”免费 注册 我 的 会 员 中 心 v | 进货 单 v | 收藏 天 | 我 星 供应 商 | 客服 中 心 x | 网 站 导航 v a 


[gg] 55m 


npesestdis , ten. e 


共 购 买 了 2 笔 订单 ”订单 详情 订单 总 额 半 240.00 元 


付款 遇 到 问题 : 
1 选择 易 批 收 殷 台 招 保 交易 ， 有 何 保障 ? 
=: 在 易 购 网 平台 进货 时 ， 付 款 选择 易 批 收银 台 做 担保 交易 ， 货 款 并 未 在 接 付 给 卖家 ， 而 是 付款 到 易 批 收银 台 ,您 妆 到 货物 签收 无 误 后 ， 再 次 确认 收 货 时 ， 订 单 款项 才 会 结算 给 去 家， 相当 于 货 到 付款 跌 。 


2 没有 网 银 怎么 办 ? 
4 : 如 果 您 没有 网 银 ， 推 荐 您 使 用 快捷 支付 来 选择 相应 银行 ， 既 松 完成 付款 。 您 还 可 以 通过 支付 宝 、 百 度 钱包 等 第 二 方 支付 平台 来 付款 。 


3 我 有 网 上 和 银行， 不 知道 怎么 操作 了 
=: 可 能 是 由 于 银行 的 数据 没有 即时 传 办 ,请 您 不 要 担心 ， 稍 后 刷新 页 面 查 看 。 如 较 长 时 间 仍 显 示 示 付款 ,可 联系 易 批 客服 (400-6688-038) 为 您 解决 。 


更 多 帮助 进入 我 的 易 批 


9-7 完成 .html 


JEU Ritti 


TE BENE AZAT Pom UV 2 I I s wu AUS CEA VERDURE P. AAT 
绍 系统 结构 的 设计 ， 为 了 方便 站 点 的 设计 与 上 传 ， 将 设计 好 的 网 页 都 存储 在 一 个 目录 
下 ， 再 用 合理 的 文件 来 管理 文档 。 在 本 地 站 点 中 应 该 用 文件 夹 合 理 地 构建 文档 的 结构 。 
首先 为 站 点 创建 一 个 主要 文件 夹 ， 然 后 在 其 中 创建 多 个 子 文件 夹 ， 最 后 将 文档 分 类 存储 
到 相应 的 文件 夹 下 。 读 者 可 以 打开 素材 文件 ， 看 一 下 实例 站 扣 的 文档 结构 以 及 文件 夹 结 
构 ， 上 其 体 如 图 9-8 所 示 。 


PG. bE 下 后 于 购物 车 系统 布局 


"s HTML5-4CSS-* JavaScript BESERASSHE 


“购物 车 ”的 系统 结构 设计 如 图 9-9 所 示 。 本 系统 的 结构 按 购 物 车 系统 的 下 订单 流程 来 


设计 实现 。 
ie" x 购物 车 系统 
SO e HAN > AERD) » yigou + O X;—E OEZ 2 
产品 列表 页 .html 
产品 详情 页 .html 
购物 车 .html 


XAD SSE EEV) IAM 
Bi- 。 包 会 到 库 中 ~ 。 共享 ~ 


修改 日 期 类 型 


2015/11/7 11:05 ”文件 夹 
2015/10/21 17:21 ”文件 夫 
2015/10/22 10:45 ”文件 夫 
2015/11/7 10:27 360 se 
2015/11/7 10:28 360 se 
2015/10/27 11:11 360 se 
2015/11/7 11:57 360 se 
2015/10/21 16:17 360 se 
2015/11/7 11:55 360 se 
2015/11/7 11:57 360 se 
2015/11/7 10:10 360 se 
2015/10/21 16:14 360 se 
2015/11/7 10:10 360 se 
2015/11/7 11:52 360 se 
2015/10/21 16:10 360 se 
2015/11/7 10:10 360 se 
2015/10/21 16:14 360 se 
2015/10/21 16:11 360 se 
2015/10/22 10:27 360 se 


确认 订单 .html 
付款 .html 


图 9-8 网 站 文件 图 9-9 系统 页 面 结 构图 


这 里 再 强调 说 明 一 下 在 实际 布局 中 生成 的 HTML 文件 一 定 要 用 小 写 的 英文 名 ， 为 了 读 
者 学 习 和 使 用 方便 ， 我 们 特别 将 其 写成 中 文 名 。 


JC 页面 规划 六 计 


本 系统 的 主要 结构 分 为 用 户 浏览 和 购物 车 订单 两 个 部 分 ， 整 个 系统 中 共有 6 个 页 面 ， 各 
页 面 的 名 称 和 对 应 的 文件 名 、 功 能 如 表 9-1 所 示 。 


表 9-1 购物 车 系统 网 页 设计 


页 面 名 称 功 能 
产品 列表 页 .html 实现 所 有 产品 的 标题 显示 页 面 
产品 详情 页 .html 用 户 单 击 产品 列表 页 后 打开 显示 详细 产品 信息 的 页 面 
购物 车 .html 用 来 统计 订购 产品 详情 的 页 面 
确认 订单 .html 用 户 确认 购物 车 内 容 的 页 面 
付款 .html 用 户 支 付款 项 的 页 面 
完成 .html 购物 完成 的 页 面 


本 实例 中 的 购物 车 按 比 较 简 化 的 过 程 来 展示 ， 有 些 电子 商务 网 站 的 购物 车 系统 功能 比较 
Z, WB SO AND EA. 


产品 丽人 台 展 示 功 能 


购物 车 系统 主要 由 产品 展示 和 后 台 结算 两 个 功能 组 成 。 实 例 中 与 购物 车 相关 的 页 面 主要 
有 “产品 列表 页 html” 和 “产品 详情 页 html”。 下 面 分 别 介绍 这 两 个 页 面 的 布局 设计 。 


(1) 完成 静态 页 面 的 设计 ， 


购物 车 系统 布局 


.月 三 几 昌 产品 列表 页 ,html 


“产品 列表 页 html” 页面 为 用 户 展示 购物 车 系统 中 所 有 的 产品 列表 ， 单 击 该 页 面 中 的 产 
品 图 片 或 者 产品 名 字 能 链接 到 “产品 详情 页 html”， 主 要 显示 数据 库 中 最 新 上 架 的 商品 
该 页 面 完成 的 效果 如 图 9-10 所 示 。 


J b 产品 列表 页 -— -— Rog 
€ > QC fi 站 file:///D:/yigou/ 产 品 列表 页 .html# we": 
大 红 门 批发 市 场 > 女装 > 毛衣 共 找 到 15636 家 公司 
男装 Tib HE HAK 棉衣 Za PAR RAR 风衣 卫衣 马甲 ”牛仔裤 ARE 更 多 国 
男装 mi HE HAY Br a PAR RAR MR 卫衣 ”马甲 ”牛仔裤 WAE 更 多 
男装 Ti HY 针织 衫 棉衣 a PAR RAR Mk 卫衣 马甲 ”牛仔裤 WAE 更 多 
男装 Th 衬衫 ”针织 衫 ”棉衣 a PAR RAR Mk 卫衣 马甲 ”牛仔裤 WAE 更 多 L 
您 是 不 是 想 找 : 休闲 男 鞋 HASE HASE HASE ”休闲 男 鞋 ”休闲 男 鞋 
综合 ARA 销量 4 Unc 所 在 地 区 v SSE Y 
Q 北京 丰台 9 北京 丰台 Pris 


¥ 29.00 月 销量 : 389 
币 凡 2016 新 款 棒 球 服 男 棒球 衫 男士 外 
£c DACRBREEUEA Bt m 


(2) 由 于 篇 幅 关 系 ， 对 于 产品 布局 相同 并 重复 的 DIV 标签 在 文中 没有 列 出 ，DIV 代码 


核心 部 分 如 下 : 


X 29.00 销量 : 389 X 29.00 3# : 389 ¥ 29.00 销量 : 389 
笛 凡 2016 新 款 棒球 服 男 棒球 衫 男士 外 笛 凡 2016 新 款 桂 球 服 男 棒球 衫 男士 外 第 凡 2016 新 就 棒球 服 男 棒球 衫 男士 外 
ETARA ENEA ETARA SpE ETARE SpE 


«div class-"spro list wrap"> 


9-10 ”产品 列表 页 .html 


«div class-"navName clearfix"> 


<h2 class-"nav t"7«a href="#"> 大 红 门 批 友 市 场 </a>><a href="#"> 20 /a»7«span^ EX 


</span></h2> 


<p class="nay_num"> 共 找到 <span>15636</span> 家 公司 </p> 


</div> 


«div class="lists"> 


«dl class="clothes clearfix"> 

«dt class="clothes 1"><a href="#"> H 3% </a></dt> 
«dd class="clothes_m"> 
«a href="#">T 恤 </a> 
<a href='"#"> 衬 祖 </a> 
«a hre 伍 "#"> 针 织 衫 </a> 
<a href="#"> 棉 衣 </a> 
«a href="#"> X y5«/a» 
«a href='"#"> 羽 绕 服 </a> 
«a href="#"> 呢 大 衣 </a> 
«a href="#"> IK </a> 
<a href="#"> EX </a> 
<a href="#"> 4 Ħ </a> 
<a href='"#"> 牛 仔裤 </a> 


| quí t m mi x9 (6 e uH 
i EL B 8 d uy E 

N 

a 

MW 


洪山 县 徐 氏 服饰 制 衣 
厂 服饰 批发 


p wu J S 


o e o 
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«a hre 伟 "#"> 休 闲 裤 </a> 
</dd> 

«dd class="clothes r"> 

<a href="#"> E c «a» 

</dd> 

</dl> 

<div class="clothes tb"> 

<p> 您 是 不 是 想 找 : </p> 
«a hre 伍 "#"> 休 闲 男 圣 </a> 
«a href="#"> 休 | 闪 女 裤 </a> 
«a hre 伍 "#"> 个 性 章 畦 </a> 
</div> 

</div> 


«div class 


LM 


minilist clearfix"^ 
«ul class-"mini ] fl"> 
<li class-"mini. list1"7 
«a href="#"> 综 合 </a> 


</li> 
«]i» 
«a href="#"> 
<span> A^ («/span^ 
<s></s> 
</a> 
«/h- 
«]i» 
«a href="#"> 
<span>} </span> 
<s></s> 
</a> 
</li> 
«]i» 
«a href="#"> 
<span> 价 格 </span> 
<s></s> 
</a> 
</li> 


</ul> 

<select class="minilist_sele"> 
<option> 所 在 地 区 </option> 

</select> 

<select class 
<option> 经 营 模式 </option> 

</select> 


LM 


LM 


minilist sele"^ 


购物 车 系统 布局 


</div> 
</div> 


<div class="prolist con swrap clearfix"> 


LM 


«ul class-"clearfix prolist con. ul" 


LM 


<li class-"prolist con list" 
«p class="tit"> 北 京 丰 台 </p> 


«a href="#"><img src-"img/pro picl.jpg"/»«/a» 


«div class="clearfix"> 
«p class-"price"-Y29.00«/p» 
«p class="num'"> 月 销量 : <i>389</i></p> 
</div> 
«a href="#" class="name">ff AL 2016 新 款 棱 球 服 男 辆 版 潮 夹 元 </a> 
«p class="stro name"> 角 斗士 服饰 旗舰 店 </p> 


</li> 


<div class="prolist_con _r"> 
«div class="hotstore"> 
«p class="tit"> 热 门店 铺 </p> 
«ul class-"hotstore con" 


LM 


<li class="clearfix"> 


<div class="info"> 
<a hre 伍 "#"> 潜 山 县 徐 氏 服饰 制 衣 厂 服饰 批发 </a> 
<p> 周 成 交 : <i>25</i> 笔 </p> 
<P>: 100%</p> 
</div> 
<a class-"pro pic" href="#"><img src-"img/pro picl.jpg"/></a> 
</li> 


<div class="hotj"> 
<p class="tit"> 热 门店 铺 </p> 
«ul class-"hot] con"> 


<li> 
<a href="#"><img src-"img/pro pic2.jpg"/»«/a» 
<div class="clearfix"> 
<p class="price">¥29.00</p> 
«p class="num'"> 月 销量 : <i>389</i></p> 
</div> 
«a href="#" class-" name" ^L 2016 新 球 棒球 服 男 </a> 
</li> 


</div> 
<div class=""swrap'"> 
<div class="page"> 
<div class="page_con"> 
<ul class="clearfix"> 
<li><a href="#"> _E— W/a»«/li» 
<li><a href="#">1</a></li> 


HTMLStCSStJavaScript BESBAAITSNS 


<li><a href="#">2</a></li> 
<li class="on"><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li><a href—="#">...</a></li> 
<li><a href="#">25</a></li> 
<li><a href="#"> P — W«/a»«/li» 
</ul> 
</div> 
</div> 


(3) 将 对 DIV 实现 样式 控制 的 样式 表 保 存在 pro listess 文件 里， 只 体 的 代码 如 下 : 


@CHARSET "UTF-8"; 

.wrap (width:1190px; margin:0 auto; 

FORES 

.Spro list.nav t(float:left; line-height:A4px; font-size: 12px; color:7666;] 

.Spro list .navName ( border-bottom:3px solid 7e12228; | 

.Spro list .navName span (color:Zd40000;] 

.Spro list .nav num {float:right; line-height:44px;} 

.Spro list .nav num span{margin:0 3px;} 

.Spro list .lists {border: 1px solid #e6e6e6; border-top:none;) 

.Spro list .clothes {border-top: 1px solid 7e6e6e6;] 

.Spro list .clothes dt,.spro list .clothes dd {float:letft;} 

.Spro list .clothes 1fwidth:143px; height:42px; line-height:42px; border-right:lpx solid #e6e6e6; text- 
align: center; background: ?fafafa; } 

.Spro list .clothes m(padding-left:24px; line-height:42px; 

.spro list .clothes m a(float:left; color:20992c8; margin-right:20px;j 

.Spro list .clothes .clothes rífloat:right; padding:9px 13px 0 0;} 

.Spro list — .clothes r — aídisplay: —inline-block;width:6lpx; height: 25px;  text-indent:12px; 
background:url(../img/s/list.png) right -41px no-repeat; line-height:24px;) 

.Spro list .minilist[padding:6px 0 7px 0; margin-top:l5px; border:lpx solid £e6e6e6; background: 
#fafafa;} 

.Spro list .minilist li{float:left; width:S1px; height26px; line-height:26px; border:lpx solid #e6e6e6; 
position:xrelative; ^ display:inline;overflow:hidden;] 

.Spro list .minilist .mini listl { text-align:center; margin-left:8px; | 

.Spro list .mini I li(margin-right: 13px;j 

.Spro list .minl 1 span(padding-left:7px;j 

.Spro list .mini ] síposition:absolute; width:7px; height8px; rightilOpx; top:lOpx;background:url 
(..AAmg/s/list.png) 0 -78px no-repeat; } 

.Spro list .mini 1 .on(text-align:center; 

.Spro list .mini 1 .on span {padding:0;} 

.Spro list .mini 1 .colíposition:absolute; width:5px; height:5px; right0px; top:2lpx;background:url 
(..AAmg/s/list.png) 0 -94px no-repeat; 

.Spro list .mini r li(margin-left:9px; text-indent:34px;j 

.Spro list .mini r síposition:absolute;width:llpx; heightllpx; leftl5px; top:8px;background: url 
(..AAmg/s/list.png) right 0 no-repeat; } 
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.spro list .people s(background-position:right -16px;) 

.Spro list .clothes tb{ height:42px; border:lpx solid #e6e6e6; border-bottom:none; padding-left:50px; 
line-height:42px; background:fafafa; } 

.Spro list.clothes tb p{ float:left; } 

.Spro list .clothes tb a{ padding-right:5px; margin-right:20px; float:left; ) C 
.Spro list .minilist selef width:94px; height:26px; border: 1px solid 7e6e6e6; line-height: 26px; float:left; 
margin:0 8px; } 

ry b FARE 

.prolist con ul{ float:left; width:960px; } 

.rolist con list{ width:220px; height:366px;border:1px solid Zfafafa; float:left; margin:0 18px 18px 0; 
display:inline; } 

.prolist con list .tit{ height:4dlpx; line-height:40px; padding-left:20px; background:url(../img/dw - 
icon.png) 2px center no-repeat; width:60px; margin:0 auto; } 

.rolist con list .tit img (width:220px; height:220px; vertical-align:middle; } 

.prolist con list .price{ float:left; padding:5px 0 0 10px; line-height:32px; color:zff9102; font- 
size:lópx; j 

.rolist con list .num( float:right; padding:5px 10px 0 Opx; line-height:32px; color:ZbOb0b0O; } 
.rolist con list .num 1{ color:2666; | 

.prolist con list .name{ width:200px; display: block; line-height:l8px; color:#0992c8; height:36px; 
overflow: hidden; padding:0 10px; } 

.prolist con list .stro name{ padding:3px 10px 0 10px; line-height:22px; height:22px; width:200px; 
overflow: hidden; color:2999;| 

.prolist con r1 float:right; width:210px; display: nline;} 

.hotstore,.hot] ( width:208px; border:1px solid #f4f4f4; margin-bottom:10px; } 

.hotstore  .tit.hotj .tit{f height34px;  line-height:34px; background:#fafafa; padding-left: 14px; 
color:#0992c8;  border-bottom:1px solid #f4f4f4;} 

.hotstore con{ padding:0 11px; width:186px; margin-right:l0px; } 

.hotstore con li{ border-bottom: 1px solid #f4f4f4; height:82px; } 

.hotstore con .info( float:left; padding-top:9px; width:ll5px; j 

.hotstore con .Info af line-height: 16px; height:32px; overflow: hidden; color:#3ca3cf; width:960px;} 
.hotstore con .Info pline-height:20px; color:7999; | 

.hotstore con .info p 1{ colorzZe30101; } 

.hotstore con .pro pic{ float:right; width:65px; height:65px; margin-top:Opx;  } 

.hotstore con .pro pic img width:65px; height:65px; vertical-align:middle; } 

.prolist con{ padding-top:12px; } 

.hotstore .br{ border-bottom:none; } 

.hot] coní padding:0 14px; width:180px; margin-rightlOpx; } 

.hot] con li( width:180px; padding-top:19px; height:234px; border-bottom: 1px solid #f4f4f4;} 

.hot] con img width:180px; height:180px; overflow: hidden; } 

.hotj con .price{ float:left; padding:5px 0 0 Opx; line-height:20px; color:zff9102; font-size:l2px; | 

.hot] con .num{ float:right; padding:5px Opx 0 Opx; line-height:20px; color:ZbObObO; } 
.Others[position:relative; background:#fff, padding:10px 0 5px; width:1190px;  height:330px; 
margin:30px auto 0;} 

.others li{ float:left; } 

.others .others con list{float:left; width:234px; margin-right:35px;; display:inline; color:Z444;1 

.others img {width:234px; height:224px;j 
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.others con{width:1044px; margin:0 auto; position:relative; height:330px;} 

.others ul (width:1100px; position:absolute; left:0;top:0;1 

.others footípadding:0 12px;} 

.others name [line-height:24px; height:48px; overflow:hidden; } 

.others name a{color:#444;} 

.others price|line-height:30px; 

.thers price strong {color:#f44b08; font-size: 18px; font-weight:normal;j 

.others price span (color:2999;1 

.others btn{line-height:20px;} 

others btn sivertical-align:middle; display:inline-block; width: 14px; height: 1 4px; 
background:url(../img/carb].png) no-repeat right -35px; margin-right: 8px; } 

.Others btn span {vertical-align:middle; color:#1f9cdc;} 

.others .btnsíposition:absolute; width:26px; height:80px; margin-top:-40px; top:50%; background: 
url(../img/carbj.png) no-repeat 0 -32px;} 

.others .btn_1{left:30px;} 

.others .btn ríright:30px;background:url(../img/carb].png) no-repeat -28px -32px;} 

age .page_con{background:#f8f8f8; padding:3px 2px; width:320px; margin:0 auto; position:relative;) 
.page li{float:left; } 

.page ul (border:1px solid #ccc; border-right:none;} 

age  aídisplayzinline-block; padding:0 10px;  line-height:28px;border-right:lpx solid #ccc; 
background:#fff; } 

.page .on a{background:#746a66; color:#fff, } 

.footer{border-top:4px solid #ddd; height:35px;padding-top:25px;  margin-top:50px; text- 
align:center;position:relative;} 


.footer a{margin:0 12px;} 


(4) 样式 按 设 计 的 页 面 效 末 布 局 后 即 可 实现 ， 该 页 面 并 没有 涉及 新 的 交互 动画， 在 页 面 


的 最 确 部 是 产品 的 可 切换 轮 播 ， 如 网 9-11 所 示 。 


= » |. es 
D 产品 列表 页 x V—3 一 一 - 
e Q fi Dfile:///D:/yigou/ 产 品 列表 页 .html# 

角 斗 士 服饰 旗舰 店 角 斗士 服饰 旗舰 店 角 斗士 服饰 旗舰 店 角 斗士 服饰 旗舰 店 


伊 苏 美 2014 新 款 无 袖 贺 领 背心 裙 复 训 波 伊 苏 闫 2014 新 款 无 袖 圆 领 背心 裙 复 二流 伊 落 美 2014 新 款 无 袖 园 领 音 心 袜 复 证 混 
沙化 沙化 沙化 沙化 
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图 9-11 产品 动画 轮 播 


通过 单 击 左 、 厂 入 类 按钮 可 以 实现 动画 效果 ， 由 于 使 用 的 JavaScript 动画 轮 播 命令 和 首 
页 制作 的 动画 轮 播 命令 是 一 样 的 ， 这 里 残 不 再 评 细 介绍 了 。 
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.产品 详情 页 .html 


“产品 详情 页 .html” 是 用 来 显示 商品 细 市 的 页 面 。 细 节 页 面 要 能 显示 出 商品 所 有 的 详细 信 
恩 ， 包 括 商 品 价格 、 商 品 产 地 、 和 商品 单位 及 商品 图 片 等 ， 同 时 要 显示 是 人 吾 还 有 产品 ， 放 入 购物 
车 等 功能 ， 实 例 中 还 加 入 了 “评价 ”“ 成 交 记 录 ”“ 订 购 说 明 ” 每 选项 卡 切换 功能 的 布局 。 

(D 首先 从 所 需要 建立 的 功能 出 发 ， 建 立 出 如 网 9-12 所 示 的 页 面 效 末 。 
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F 2016 秋冬 款 货号 : XYG503 货号 : XYG503 货号 : XYG503 
货源 类 别 : 现货 货源 类 别 : 现货 货源 类 别 : 现货 
货源 类 别 : 现货 货源 类 别 : 现货 货源 类 别 : 现货 

DENENP semen iBK : 中 长 裙 初 长 : 中 长 裙 
纹 拼接 连 衣 袜 . 货源 类 别 : 现货 货源 类 别 : 现货 
7.7 EM 货源 类 别 : 现货 货源 类 别 : 现货 
BEK: 中 长 裙 RK: 中 长 裙 


欧美 夏装 外 贸 格 


图 9-12 产品 详情 页 .html 
(2) 该 页 面 的 核心 DIV 布局 代码 如 下 : 


«div class="content clearfix lpro"> 
«div class="store side"> 
«div class-"supplier info" 
«p class-"store side title"> 供 应 商 信 息 </p> 
«div class-"store side box"> 
«dl» 
<dt><a hre 伍 "#"> 广 东 环 博 网 络 科 技 有 限 公 司 </a></dt> 
<dd> 联 系 人 : 陈 经 理 </dd> 
«dd class="clearfix"><span> 供 应 等 级 : </span><i></i></dd> 
<dd> 经 营 模式 : 经 销 批 发 ”<b>[ 以 认证 ]</b></dd> 
<dd> 所 在 地 区 : 广东 深圳 市 南山 区 </dd> 
</dl> 
«div class="supplier info cert"> 
<p class="tit"> 企 业 认证 信息 : </p> 
«p class-"info certl clearfix"><i class="b icon2"></i><span> 企 业 实 地 认证 </span> 
<i class="b icon1"></i><span> 买 家 保障 </span></p> 
«p class="info_cert3"> 满 xx Hi: <b>4.9</b></p> 
«a href-"javascript:;" class="info cert5"> 收 藏 旺 铺 </a> 
</div> 
</div> 
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</div> 


EN 


«div class-"product sear"> 


«p class-"store side title"> 产 品 搜索 </p> 


EXE. 


«div class-"store side box" 
«form method="post" action="#"> 
<div class="name clearfix"><span> 产 品名 : </span><input type="text" /></div> 
<div class="price clearfix"><span> 价 &nbsp;&nbsp;&nbsp;f&: </span><input type="text" 人 < 这 到 
«/i»«input type="text" /></div> 
«button type="submit"></button> 
</form> 
</div> 
</div> 
«div class-"product type" 
«p class-"store side title"> 销 售 排行 </p> 


LM 


«div class-"store side box" 


«ul class="menu"> 
—M 


«]i class 
«p class-"tit"»2016 秋冬 蒜 <i class="open"></i></p> 


LM 


menu list" 


«ol class-"menu2"- 
<li><a href="#"> &.JH Ffe</a></li> 
<li><a href="#"> F&.JH F fe</a></li> 
<li><a href="#"> &.JH F fe</a></li> 
<li><a href="#"> F&.JH F fe</a></li> 
</ol> 
</li> 

<div class="sales"> 

«p class-"store side title"> 产 品 分 类 </p> 

«div class-"store side box"> 

«ul» 


LM 


«]i class-"sales list clearfix"> 


LM 


«a href-"7" class-"pro pic'"^«img src-"img/pro pic.jpg"/»«/a» 


«div class-"info"- 
<a class-"name" href="#"> 网 美 夏装 外 贸 格 纹 拼接 连衣裙 </a> 
«p class="price">¥130.00</p> 
«p class='"num'"> 成 交 607 笔 </p> 
</div> 
</li> 
<div class="store_r"> 
«div class="]_intro"> 
«div class-"] intro t clearfix"> 
<h3 class-"title f 122016 夏装 新 款 欧美 大 牌 简约 OL AEE TIRE Vi Et JEDE ACH 
Q8025</h3> 
</div> 
«div class-"intro main clearfix"> 
«div class-"l intro ] > 


«div class-"product intro clearfix" 
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«div class-"product intro lf 1"> 
«div class-"p 1 top"><a href="#"><img src-"img/productl .jpg"/></a></div> 
«div class-"p ] foot" 
«a class-"btns btn ] href="#"></a> 
«a class-"btns btn r" href="#"></a> C 
«div class-"p 1 pic" 
«ul class-"clearfix con" 
«]i» 
«div class-"list"7«a href="#"><img src-"img/product2 jpg" /»«/a»«/div» 
«div class-"list"7«a href="#"><img src-"img/product2 jpg" /»«/a»«/div» 
</li> 
<li style="display: none;"> 
«div class="list"><a href="#"><img srec="img/product2.jpg"/></a></div> 
«div class="list"><a href="#"><img srec="img/product2.jpg"/></a></div> 
</li> 
«div class-"product intro rf 1"> 
«ul class="p r acAdd p r acAdd list" style-"display:none;"- 
<li class-"p r price clearfix"><h5> 起 批量 : </h5><span> Z1 张 </span>/ 件 </1li> 
<li class="p r price clearfix"><hS> 尾 货 放血 价 ; </h5><span class="colo1"> Y 20.00- Y 40.00«/span-/ 
又 </i> 
<li class-"p r price clearfix"><h > EWN FE: </h5><span> Y 99.00- Y 199.00«/span-/XX </li> 
<li class="p r add clearfix"><h5> 发 货 / 物 流 : </h5><span> 广 东 ZR SE 全 J5 3x 
</span><strong> Dti :X 10&nbsp;&nbsp; $1 35 :«i class="colo1">¥42</i></strong></li> 
<li class-"p r mind clearfix"><h5> 成 交 / 评 价 : </h5><span>2 双 成 区 和 暂 无 评价 </span></i> 
</ul> 
«div class=""> 
«ul class="p r mt clearfix"> 
<]> 起 批量 〈 件 ) </i> 
«lif f i 
</ul> 
<div class="p r buy clearfix"> 
<h4 class-"title f£ 1"> 文 付 方式 :</h4> 
«a href-"£" class="on"> x] &«/a» 
«a hre£-"z- pj [48 4T«/a- 


</div> 
</div> 
</div> 
(3) 将 页 面 的 样式 表 储 存在 lists.css 中 ， 其 核心 代码 如 下 : 
/*P* f fei i */ 


.l intro I (width:788px; float:left;) 

.l intro 1 .product intro fwidth:788px;background:7fff; } 

.l intro l.product intro I(width:212px;padding-right:Opx;j 

.l intro l.p 1 top,.l intro l.p ] top img(width:212px; height:212px;j 

.| intro l.p 1 foot(border:1px solid 7e5e5e5; height:80px; padding:5px 0 4px; position:relative;] 
.l intro l.p 1 foot .btnsíposition:absolute;width: 19px; height:81px; top:5px;j 
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.| intro 1 .p 1 foot.btn I(left:0; background-position:0 0; } 

.l intro l.p 1 foot.btn ríright:0;background-position:-22px Opx;} 

.l intro 1 .p 1 pic{width:172px; height:81px;position:relative; margin:0 auto; overflow:hidden; } 

.l intro l.p 1 pic ulfposition:absolute;left:0; width:300px;j 

.l intro 1.p 1 pic lif float:left; height:81px; width:182px; } 

.l intro 1 .p 1 pic .list(float:left; width:81px; height:8 1px; display:inline;margin-right: 1 0px; } 

l intro ] .product intro r(border:lpx solid £e5e5e5;padding:20px Opx 0 35px; width:530px; 
height:281px; height:282px; overflow:hidden; } 

l intro l.p r mtli,.l intro 1.p r list li(float:left;display:inline; color:2888; } 

.| intro 1 .p r mt(background:Zfl1f1f1; line-height:26px; colorzZ888;margin:0 7px; 

l intro 1 .p r mt li{padding:0 19px; margin-right:64px;j 

.| intro 1 .p r listfborder-bottom:1px solid Ze5e5e5; line-height:39px; height:39px; overflow:hidden; 
margin:O 10px;j 

.l intro l.p r list li(width:90px; text-align:center; margin-right:88px;j 

.l intro l.p r list span(color:Ze50012; font-size:l6px; line-height:38px;] 

.l intro l.p r acAdd list{ height:235px; } 

.l intro l.p r acAdd li (Iine-height:23px;color:77c7c7c; height:23px; overflow:hidden;vertical-align:top; ) 
l intro |] .p r acAdd  .list(line-height:30px;colorzZ7c7c7e; height36px; overflow:hidden;vertical- 
align:top;j 

.l intro l.p r acípadding:7px 0 0 12px; height:22px; overflow:hidden;] 

.l intro 1 .p r ac strongícolor: 7e50012; font-weight:normal; font-size:l16px; display:inline-block; line- 
height:20px;j 

l intro 1 .p r ac .ac date{color:#{f0014; margin-left:5px; font-size:lópx; line-height:20px; text- 
decoration:underline;) 

l intro 1 .p r acAdd  .activity (width:54px; height:22px;  text-align:center; — line-height:22px; 
color:Zzfff;background:Zff4400; } 

.l intro l.p r acAdd h5,.] intro l.p r acAdd span float:left;j 

.l intro l.p r acAdd h$ {width:80px; text-align:left;j 

.l intro 1 .p r buy(color:Ze5e5e5; border:lpx solid #e5e5e5; line-height:30px; width:386px; padding- 
left:12px; color:#666;} 

.| intro l.p r buy at{float:left; color:#666; margin-right:12px;j 

.l intro l.p r buy .onícolor:Ze50012; text-decoration:underline;) 

. intro 1 .colol ( color:#d42f00; } 

.| intro l.p r add strong ( padding-left:30px; font-weight: normal; } 

helpful ([padding-top: 12px; line-height:20px; 

helpful .title {color:#bObObO;} 

.lhelpful .ico{float:left;margin:3px 3px 0 0; width:l6px; height: 14px; overflow: hidden; background- 
position:right bottom; 

helpful .sharetex .1co (background-position:-68px bottom; } 

helpful .sharetex ( margin-right: 15px;j 

helpful .text(color:£125dc6;] 

helpful .collectex .num (color:a3a3a4;] 

helpful .shareAco [position:relative;) 

ART */ 

.collect_box {position:fixed; display:none; width:508px; height:280px; z-index:500; top:150px; left:50%; 
margin-left:-250px;} 


X95 GUESS 


.c shadow {width:523px; height:293px; position:absolute; z-index:5;background:7000;  opacity:0.2; 
filter:alpha(opacity-20);! 

.c main(position:absolute; width:448px; height:255px; z-index:10; background:#fff, left:7px; top:6px; 
padding:25px 30px 0;} 

.c main t{border-bottom: 1px solid #ccc; padding-bottom: I Opx;line-height:28px; C 
append info(color:404040; padding-right: | Opx;} 

append info a(color:3366cc; 

append info 1(width:24px; height:24px; margin:2px 12px 0 0; background-position:right -16px;j 

.Sify box .btn(float:left; width:50px; height:28px; color:#999; padding-left:32px; background-position:0 
-83px;j 

.c closeffloatright;line-height:26px; text-decoration:none; overflow:hidden;color:Z9c9c97; margin- 
top:2px; cursor:pointer;font-family: Tahoma,sans;font-size: 22px;j 

.c m title(padding-top:19px; line-height:38px; font-size:14px; color:#808080;} 

.c main con ul (margin-right:- 8px; 

.c main con li(width:100px; float:left; margin-right: 15px; display:inline; line-height:16px; color:#999;} 
.c main con a{color:#999;} 

.c m pic img(width:100px; height: 100px;) 

.c m price strong ícolor:e6040c; font-weight:normal; 

PELA DUI 4l 

.collect boxsíposition:fixed; display:none; width:408px; height:280px; z-index:500; top:150px; left:5096; 
margin-left:-250px;j 

.b shadow {width:400px; height:170px; position:absolute; z-index:5;background:7000;  opacity:0.2; 
filter:alpha(opacity-20);! 

.b mainíposition:absolute; width:385px; height: 155px; z-index:10; background:#fff, left: 7px; top:6px; } 
.b main tf line-height:28px; padding:20px 0 10px 50px;j 

.b main tit{ background: Zf1f7fb; line-height:30px; border-bottom: 1px solid Zecc; height:30px; | 

.b close(floatright;line-height:26px; text-decoration:none; padding-right:5px; overflow:hidden; color: 
#9c9c97; margin-top:2px; cursor:pointer; font-family: Tahoma,sans;font-size: 22px;] 

.b main tit span{ float:left; padding-left:10px; color:z000; } 

.b main t.append info{ padding-right:10px; font-size:14px; color:#404040;} 

.b main t .listl ( line-height: 30px; color:2404040; padding-left:34px; | 

.b main t list] spaní color:Zfb8500; } 

b main t list] af color:Z014999; padding-right: 1 0px; } 

.b main no .append info 1{ background:url(../img/cancel ico.png) 0 center no-repeat; } 

.b main no .append info(color:f£70023; } 

colors {border:1px solid #e5e5e5;} 

colors l1fwidth:560px; border-right: 1px solid 2e5e5e5; padding-bottom:20px;] 

colors 1 .mtípadding:6px 0 10px 10px; color:#444; line-height: 40px;} 

colors | .mt title (margin-right:6px;j 

lcolors 1 .mt a[floatleft; border:2px solid 7fff; line-height:36px; position:relative; padding:O 5px; 
margin-right:6px; color:#444;} 

lcolors 1 .mt .on síposition:absolute; width:6px; height:6px; background-position:right -49px; 
overflow:hidden;;right: 0;bottom: 0;} 

colors 1 .mt .on{border-color:#e6040c; } 

colors 1 .mcf height:215px; overflow-y: auto; overflow-x: hidden; 

colors I .mc liffloat:left; text-align:center; line-height:26px;j 
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.lcolors | .mc t(background:Zf1f1f1; color:#999; width:528px; padding:0 23px 0 24pX;} 

.lcolors 1.mc c ul(color:Z444; border-bottom: 1px solid #f1f1 f1; padding:5px 15px 5px 16px;j 

.lcolors 1 .mc c li(Iine-height:24px;j 

colors 1.mc c .list4 (color:117300;] 

colors | .mc .listl (padding-left: 10px; width:8O0px; text-align:left; } 

colors 1 .mc .list2 {width:86px;} 

colors 1 .mc .list3 (width:106px;] 

.lcolors | .mc .list3 input(width:105px; border:none; height:24px; line-height:24px; text-align:center; 
padding:0; color:#444;} 

colors 1 .mc .list4 (width: 78px;) 

colors 1 .mc .list5 (width:1 1O0px; padding-left:20px;j 

.lcolors ] .mc c inputífloat: left; width:48px; padding:3px; height:l4px; line-height:14px; border:1px 
solid ?bdbdbd; text-align:center; } 

]colors 1 .mc c a[float:left;width:25px; height:22px; background-position:-48px -59px;} 

.lcolors 1.mc c.b límargin-right:1px;j 

.lcolors 1.mc c.b rímargin-left: 1px;background-position:right -59px } 

.lcolors r(padding:3px 10px 0; width:188px;j 

colors r .title{color:#666; padding:9px 0; border-bottom: 1px solid 7e5e5e5; line-height:24px; font- 
size:l6px;i 

colors r .title a{float:right; width:46px; font-size: 12px; height:22px; line-height:22px; text-align: center; 
color:£125dc6; border:1px solid 7e5e5e5;] 

colors r .priceIn [padding:38px 0 0 14px; color:2818080; height:50px;line-height: 18px; } 

colors r .priceIn em{padding:0 13px 0 10px; color:2818080; display:inline-block; height:15px; line- 
height:17px; overflow:hidden; } 

.lcolors T .priceIn span {color:#cc0000; font-size:16px; line-height: 1 8px;} 

.lcolors r .sendfor{padding-bottom: 10px; } 

colors r .sendfor a{display: inline-block; width:186px; color:#fb8500; font-size:16px; text-align:center; 
height:34px; line-height:34px; border:1px solid #fdc79e; background:#fef2e3;} 

lcolors r .Jom afdisplay: inline-block; width:188px; color:#fff; font-size:16px; text-align:center; 
height:36px; line-height:36px;background:#fb8500;} 

.| intro t{ line-height:30px;} 

. intro t .title{color:#000;width:780px; font-size: 16px; height:30px; line-height:30px; overflow:hidden; } 
.| intro t .btn a{float:left;color:#666;margin:0 7px;} 

.| intro r{float:right; width:130px; border:1px solid #e5e5e5; height:612px; height:613px;j 

. intro r .title(color:Z888;padding-left: lOpx; background:#f6f6f6; line-height:28px; 

.| intro r li{padding:10px 15px 5px; line-height: 14px;j 

l intro r imgiwidth:100px; height: 100px;j 

.l intro r.in r price span(color:7e6040c; 

/* lj os vH] */ 

serve {padding:28px 0 10px;} 

serve h3 {border:1px solid Zebeldc; line-height:28px; height:28px; padding-left:20px; color:#888;} 
Pi n VE DES 

.ltab .mt (height:33px; overflow:hidden; } 

tab .mt ul (background:72f21212; height:32px;border-bottom:1px solid Zccc; } 

tab .mt li {float:left; line-height:32px;j 

.ltab .mt a (padding:O 20px; float:left; color:#444;} 
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tab .mt .on {border-top:2px solid #666; height:31px; } 

.ltab .mt .on a[border-left:lpx solid Zccce;border-right:lpx solid Zccc;line-height:29px; background: 
#fff;height:3 1px; } 

.ltab .mc (width:788px; overflow:hidden; } 

tab .carinfo {float:left; width:240px; line-height:24px;} > 
.ltab .mc cons (display:none;] 

.ltab .conl {border:lpx solid £Zccc; padding:lOpx; border-top:none; height:228px; overflow:hidden; 
display:block; } 

pics img (margin-top:22px;j 

PER d 

.others ( width:990px; margin:0 auto; overflow:hidden; } 

.others  .mt[font-size:lópx; color:#444;  line-height:30px;  border-bottom:3px solid #696969; 
/*background:url(../img/icon8.png) 0 bottom no-repeat;*/1 

.others .mc (padding: 15px 25px 20px;; width:970px; 

.others li{float:left; width:152px; height:223px; text-align:center; line-height:22px; padding:7px 9px 0 
7px; background:Zeee; display:inline; margin:0 25px 20px 0;} 

.others .o pic(width:150px; height: 150px; border:1px solid ccc; overflow:hidden; } 


.others .o price span {color:#f30a0a; } 
Others .o name a{color:#444;} 


(4) 在 上 面 的 代码 中 ， 产 品 的 展示 上 只 是 展示 了 毅 态 的 布局 功能 ， 实 例 中 使 用 了 两 个 动态 
的 交互 功能 ， 其 一 是 在 单 击 “ 一 ”和 “十 ”按钮 和 时 采购 清单 能 够 目 动 累计 结算 ， 如 图 9-13 
所 示 ; 其 二 是 在 早 击 “加 入 购物 车 ”按钮 时 弹出 验证 对 话 框 ， 其 体 如 图 9-14 PTR. 


友情 提示 : 请 选择 颜色 ， 及 您 想 要 尺码 的 采购 量 , 最 小 起 批量 为 3 件 。 p* 分 享 ， 曾 收藏 产品 (100) 
框架 床 180"200 2480.00 1000 -L* I ^ 采购 清单 < 详 单 
框架 床 180*200 2480.00 1000 -L* I 
框架 床 180*200 2480.00 1000 -L* [+] 共 8 件 | 800 元 
框架 床 180200 2480.00 1000 -L: I 
框架 床 180*200 2480.00 1000 -| 2 |+ | f MBILTRS | 
框架 床 180*200 2480.00 1000 -L2 |+] : 


图 9-13 采购 清单 动态 结算 


友情 提示 : 请 选择 颜色 ， 及 您 想 要 尺码 的 采购 量 ， 最 小 起 批量 为 3 件 。 p os 收藏 产品 (100) 
P E 1 
e 货品 已 添加 成 功 ! 共 8 件 | 800x 


当前 购物 车 共 95 种 货品 ,最 多 可 以 再 购 5 种 。 


立即 订购 


框架 床 180*200 2480.00 1000 [-L2 J+] : 加 入 购物 车 


图 9-14 加 入 购物 车 时 弹出 对 话 框 验证 


(5) 将 实现 上 述 功 能 的 JavaScript 代码 放 在 lists.js 文件 里 面 ， 核 心 的 代码 如 下 : 
// 加 入 购物 车 弹出 


$(.1colors r .join a^).click(function() ( 
if(S( collect boxs').css('display") == 'none') { 


$(.collect boxs").show(); 
:else1 


$(.collect boxs").hide(); 


j 

J); 

$('.collect_boxs .b close").click(function() f 
$(.collect boxs'").hide(); 

DD 

/公告 选项 卡 

$(.Itab con li").click(function() ( 
var idx = $(this).index(); 
S(this).siblings().removeClass('on); 
$(this).addClass('on); 
$(.mc cons^.hide().eq(idx).show(); 

DD 


/采购 数量 加 减 
$( .plus").click(function() { 


"s HTML5-4CSS-*JavaScript 网 页 布局 人 入门 到 精通 


var vas = parseInt($(this).prev('input').val()), max =parseInt($(this). 


—M 


closest(".mp").find('input[name-"num" ).val()) ; 
if(vascmax)1 
vastt; 
$(this).prev('input").val(vas) 
:else1 
return false; 
j 
numPrice(); 
DD» 
$( .reduce").click(function() ( 
var vas = parseInt(S(this).next('input').val()) ; 
if(vas>0){ 
vas--; 
$(this).next('input').val(vas) 
:else1 
return false; 


} 


numPrice(); 


}); 


/产品 图 片 轮 播 
$(.p 1 foot'").slides({ 
container: 'con', 


购物 车 系统 布局 


generateNextPrev: false, 
next: 'btn l', 

prev: 'btn r', 

pagination: false, 
generatePagination: false, 
play: 0, 

pause: true, 

hoverPause: true 


}); 


/改变 数量 
$(.listNum").change(function() { 
var inum = $(this).val), max -parseInt(S(this). 
closest(".mp").find('input[name-"num" |).val()) ; 
if(inum«0)1 
inum = 0; 
velse if(inum >max){ 


inum = max; 
j 
$S(this).val(inum); 
numPrice(); 
D» 
/改变 价格 总 数 


function numPrice()1 
var numSum - 0, priceSum - 0; 
$(.listNum").each(function() { 
numSum += parseInt($(this).val()); 
priceSum += parseInt(S(this).val()) * parseInt(S(this). 
closest(".mp").find('input[name-"price" |).val()); 
h; 


$('.priceln .num^.html(numSum); 


$('.priceIn .price').html(priceSum); 


hh 
到 这 里 就 完成 了 商品 相关 页 面 的 设计 布局 ， 已 经 可 以 实现 网 站 产品 的 前 人 台 展 示 和 订购 的 


OS 购物 车 下 订单 功能 


电子 商务 网 站 的 核心 技术 惑 在 于 产品 的 展示 与 网 上 订购 、 结 算 功 能， 在 网 站 建设 中 这 些 
知识 统称 为 “购物 和 车 系统 ”。 购 物 车 最 实用 的 功能 就 是 进行 产品 结算 ， 通 过 这 个 功能 ， 用 户 


fo HTML54*CSS* JavaScript 网 页 布局 人 入门 到 精通 _ 


在 选择 了 目 己 喜欢 的 产品 后 可 以 通过 网 站 确认 ， 输 入 联系 方法 ， 提 交 后 写 入 数据 库 ， 方 便 网 
站 省 理 者 进行 售后 服务 ， 这 也 是 购物 车 的 主要 功能 。 


J C 7 2c. htl 


“购物 车 .html” 页 面 是 在 “产品 详情 页 .html” 中 单 击 “ 加 入 购物 车 ”按钮 跳 转 到 的 页 
面 ， 主 要 实现 统计 订单 数量 的 功能 ， 如 图 9-15 Br. 


— 一 一 


= um 


进货 车 状态 (21 100) 货品 金额 总 计 ( 不 会 运费 ) : 0 元 确认 下 单 
货品 单价 (元 ) 全 额 (元 ) 操作 
D ”供应 商 : 深圳 市 宝安 区 沙井 汇合 服装 厂 


8 T Rd ESSERRSNSUAE Eth 5-9 件 : 100.00 
连衣裙 aR 
| 局 Em:Sn 尺寸 :S 10-29 件 : 90.00 


=30 件 : 80.00 


供应 商 : 深圳 市 宝安 区 沙井 浩 优 服装 厂 


5-9 件 : 100.00 
10-29 件 ; 90.00 


5-9 件 : 100.00 
10-29 件 ; 90.00 


:0 件 货品 金额 总 计 ( 不 会 运费 ) : 0 元 


9-15 “购物 车 .html” 页 面 的 设计 
(1) 该 页 面 的 核心 DIV 布局 代码 如 下 : 


LM 


«div class="carl"> 


—M 


«div class="wrap"> 
«div class="content"> 
Lot c 


LM 


«div class-"mt clearfix" 
«div class-"mt 1f 1"> 进 货车 状态 〈<span><i class="j sumnum">2</i>/ 100«/span») </div> 
«div class-"mf r f r"> 


«div class-"mf r num"> 数 量 总 计 : ”<span>0</span> 件 </div> 


«div class-"mf r price" A mE WMV CÁNTDAA ER): ”<span>0</span> 元 </div> 
«div class-" mf. sub"><a hre 伟 "确认 订单 .html"> 确 认 下 单 </a></div> 

</div> 

</div> 


—M 


«div class-"mc nav" 
«ul class=" 

<li class-"lis1 "145 mm</li> 

<li class="lis2"> 单 价 〈 元 ) </li> 

<li class="lis3"> 数 量 </li> 


<li class="]is5'> 人 金额 (元 ) </li> 


mc tclearfix"> 


X95 GUESS 


<li class-"lis6" 7$ F«/li» 
</ul> 
</div> 
<!-= 订 单 评 情 ， 批 及 --> 
«div class="mc"> © 
<input type="hidden" name="protype" isWholesale = "0" /> 
<!-- 全 局 说 明 1， 产 品 是 不 是 批发 ， 后 台 会 传 一 个 叫 Wholesale 的 值 ， 为 0 RER, N 1 就 是 
TB RARP --> 
<!-- 全 局 说 明 2, KAZIA checkbox 的 sku 再 做 一 系列 判断 数量 是 否 大 于 起 批量 、 小 于 库存 ， 如 
末 是 批 肥 ， 匹 配 价格 ， 然 后 * 购 买 数 量 ， 计 算 总 价 、 总 数量 --> 


LM 


«div class-"carInput clearfix" 
<!-- 这 里 需要 放 商 铺 id (value 值 不 是 固定 的 ) 到 input checkbox 里 ，input 中 所 有 商铺 的 name 属 
性 名 最 好 相同 --> 
<!-- 勺 选 这 个 checkbox 会 全 选 或 者 全 取消 这 个 商铺 下 的 所 有 sku checkbox--> 
«input class-"f 1 checklist" type-"checkbox" name-"store id" 
value-"77ec02a1a25fA4cf89186d0e6cf129a38"/7 

<!-- 下 面 的 供应 商 名 称 是 从 后 合 传 过 来 的 ， 可 随意 改动 标签 样式 -> 
«div class-"adds f ">M R: «a hre 伍 "#"> 深 圳 市 宝安 区 沙井 浩 乌 服装 厂 </a> </div> 

</div> 


«ul class 


EA 


mc c clearfix"> 

<li class-"lis1" 

<!-- 这 里 需要 放 skuld (value 值 不 是 固定 的 ) 到 input checkbox Œ, input 中 所 有 商铺 的 name 属性 

名 最 好 相同 --> 

<input class-"f 1 checkSin" name-"sku id" type="checkbox" value="cf{0ff9af213e4cf2af944ff37b6de90b"/> 
«div class-"prodt f 1"> 


<!-- 图 片 是 从 后 台 传 过 来 的 图 刻 地 址 放 到 这 儿 ， 除 了 a 标签， 其 他 随便 改 --> 


EA 


«div class 

«div class-"prodt text f 1"> 

<!-- 产品 名 称 是 从 后 台 传 过 来 放 到 这 儿 ， 除 了 a 标签 ， 其 他 随便 改 --> 

<p class-"prodt name'"><a href="#">) ZKK EE MEOS BOR IDEE ACER IBURC THIS CR TA RK 
«/a»«/p» 


prodt pic f 1"><a href="#"><img src-"img/shopimg.jpg"/»—/a»«/div» 


- 


«div class-"prodt norms clearfix"> 

<!-- 每 条 sku 的 规格 都 不 同 ， 后 人 台 传 值 显示 用 ， 可 以 随便 改 --> 
«div class-"prodt color f l"> 颜 色 : <span>% H </span></div> 
«div class-"prodt size f 1"> 尺 寸 : <span>S</span></div> 
</div> 
</div> 
</div> 


</i> 


<li class="] proprice"> 

<!-- 如 果 是 批发 ， 显 示 下 和 面 这 个 ;如 果 不 是 批发 ， 显 示 蛙 价 束 可 以 ， 所 有 值 虱 是 从 后 台 传 过 来 、 
动态 变化 的 ， 可 以 先 虚 构 数 据 ， 考 虑 到 数据 不 古 固定 的 束 好 --> 

<!-- 同一 个 产品 的 批发 价格 区 间 是 一 样 的 --> 

<!-- 如 果 是 批发 ， 则 需要 根据 买 家 填 与 的 购买 数量 来 匹配 这 里 的 数量 区 间 ， 取 对 应 的 价格 ， 这 里 
能 实现 束 行 ， 不 管用 隐 茂 域 还 是 其 他 标签 --> 


<!-- 这 里 还 判断 同一 件 产品 所 选择 的 多 条 sku 的 购买 数量 之 和 是 否 大 于 最 小 起 批量 --> 
<!-- 注意 如 条 是 批 友 ， 价 格 区 间 最 少 有 1 段 、 最 多 有 3 段 --> 
«p class="on">5-9 f/F: 100.00 </p> 
<p >10-29 fF: 90.00 </p> 
«p»230 件 : 80.00 </p> 
«input type="hidden" price-" 100" min-"5" /> 
«input type="hidden" price="90" min-" 10" /> 
«input type="hidden" price-" 80" min-"30" /> 
</li> 
<li class-"lis3 ] pronum"> 
«div class="lis3_con clearfix"> 
<!-- 功能 需要 ， 这 个 库存 数量 隐藏 域 放 哪 儿 者 行 --> 
«input type="hidden" name-"stock" value="100"> 
«1--«input type="hidden" value=" 库 存 数 量 例 1000">--> 
<!-- 减 少 购买 数量 ， 最 小 减 到 0 --> 
«a class-"btns2 btn 1" href="javascript:;"></a> 
<!-- 核心 方法 的 重要 参数 ， 每 条 sku 的 购买 数量 ， 建 议 的 方法 是 失去 焦点 就 触发 事件 判断 一 次 数 
量变 化 ， 如 采 是 批 肥 ， 匹 配 价格 ， 如 采 不 是 ， 直 接 取 单 价 ， 然 后 再 复 一 届 总 额 --> 
«div class-"btns2 inp"><input type="text" value-"1" name="skuBuyNumber"/></div> 
<!-- 增 加 购买 数量 ， 最 大 加 到 库存 量 --> 


«a class-"btns2 btn r" href="javascript:;"></a> 


</div> 
«span class="num prompt"> 数 量 或 金额 不 满足 商家 规则 </span> 
</li> 


<li class="lis5">100.00 </li> 

<li class="lis6"> 

<a hre 伍 "javascript:;"> 移 全 收藏 </a><br> 

<a class-"j prodel" href="javascript:;"> 删 除 </a> 
</li> 

</ul> 


</div> 


<!--= 确 认 下 单 -> 


EA 


«div class-"mf nav box" 


«div class=" 
«div class-"mf 1f 1"> 

<label><input type="checkbox" name-"checkinp" class-"checkAIl" 4-3 «/label- 
«span class-"mf 1 del"> 删 除 所 选 </span> 

<span> 批 量 收藏 </span> 

</div> 


mfmf nav clearfix"> 


«div class="mf rf r"> 

<div class-"mf r num"> 数 量 总 计 : <span>0</span> 件 </div> 

«div class="mf r price" fi m EALA AER) : ”<span>0</span> 元 </div> 
«div class-"mf sub"><a hre 仁 "加 > 人 确认 下 单 </a></div> 


</div> 


X95 GUESS 


</div> 
</div> 
</div> 
(20 将 页 面 的 样式 表 储存 在 orderess 中 ， 页 面 的 核心 代码 如 下 C 
IW) 


.Carl nav li(width:128px;j 

.carl (background: Zf8f8f8; padding:15px 0 25px 0; border-top:1px solid Zelelel;border-bottom:1px solid 
Zelelel;j 

.Carl .content (background: Zfff;margin-bottom:30px; padding:0 10px 12px 20px;) 

.Carl .mt (line-height:52px; color:#aaa; padding-right:60px;) 

.Carl .mt l[font-size:14px; color:#444;} 

.Carl .mt 1 .col (font-size: 12px; color:#aaa;} 

.carl .mt r btnípadding-top:O9px;margin-left:80px; line-height:32px;] 

.carl .mt r btn a(width:93px; height:32px; background:url(../img/carbj.png) no-repeat; display:inline- 
block; text-align:center;color:Zfff; | 

.Carl .mc t(background:Zf8f8f8;) 

.Carl .mc t li(font-size:14px;] 

.carl .mc tli,.carl .mc c liffloat:left;color:Z444; Iine-height:30px;text-align:center; j 

.Carl .mc (padding-bottom:40px; } 

.carl .mc nav .lisl,.carl .mc .lisl {width:20Spx; padding-left:115px; text-align:left;} 

.carl .mce nav .lis2,.carl .mc .lis2 (width:215px;j 

.carl .mc nav .lis3,.carl .mc .lis3 {width:180px; position:relative;} 

.carl .me nav .lis4,.carl .mc .lis4 {width:18Spx;} 

.carl .me nav .lis5,.carl .mc .lis5 {width:18Spx;} 

.carl .me nav .lis6,.carl .mc .lis6é {width:230px;} 

.Carl .failure pro .mc .lis3 (width:150px; line-height: 23px; padding-top: 20px; position:relative;) 

um prompt|  position:absolute; ^ width:200px; text-align:left, —height22px;  line-height:22px; 
color:ze93d47; padding-left:16px; top:43px; left:50px; background:url(../img/cart 1col.png) no-repeat 0 
center; } 

.carl .carInputbackground:Zfaf6fl; line-height:30px; margin-top:1O0px;vertical-align:middle; padding- 
left:20px; } 

.carl .carInput input (margin-top:8px;*margin-top:Apx; margin-right:20px; 

.carl .carInput .adds (vertical-align:middle;line-height:30px;j 

.Carl .carInput a (line-height:30px; color:#225588; display:inline-block; } 

.Carl .mc c{padding:10px 0 10px;j 

.Carl .mc c .lisl (padding-left:20px;*padding-left:24px; width:300px;] 

.Carl mc c a{color:#444;} 

.carl .mc c .lisl input(margin-top:8px;*margin-top:4px; margin-right:20px; width: 1 3px;} 

.Carl .prodt (width:236px;) 

.Carl .prodt pic,.carl .prodt pic img (width:53px;height: 69px; } 

.carl .prodt textípadding-left: 1Opx; width:173px; line-height:22px; color:#666;} 

.Carl .prodt name {height:44px; overflow:hidden; } 

.Carl .prodt name aícolor:2225588;1 

.carl .prodt size (margin-left: 12px;j 


HTML5*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


.Carl .mc c .lis21 line-height:20px;padding-top:3px; color:#888;} 

.Carl mc c .lis2 pf text-decoration:line-through; } 

.Carl .me c .lis2 p.retail f padding-top:18px; } 

.Carl .mc c .lis2 .on{ text-decoration:none; } 

.Carl .lis3 con{width:74px;margin:0 auto; padding-top:20px;} 

.Carl .lis3 con .btns{float:left;width:24px; height:23px; background:url(../img/carbj3.png) no-repeat 0 0;} 
.Carl .lis3 con .btns2 {float:left;width:24px; height:23px; background:url(../img/carbj2.png) no-repeat;} 
.Carl .lis3 con .btn rfbackground-position:-50px 0;} 

.Carl .lis3 con .inp{float:left;width:26px; height:23px; background-position:-24px 0;} 


.carl .lis3 con input{width:24px; float:left, height:l6px; padding:4px 0 0 2px; border:none; 
background:none; outline:none; text-align: center;} 

.car] .mc c .lis4,.carl .mc c .lis5 (padding-top:20px; line-height:23px;] 

.Carl .mc c .lis5ícolor:ZfA4b08;1 

.Carl .mc c .lisóíline-height:28px;padding-top: 15px;) 

.mf nav box(width:1160px; height:60px; } 

.carl .mf,.mf nav box .mf nav {height:60px; line-height:60px;  background:Zefefef;padding:0 60px 0 
20px;*padding-left:24px; j 

.mf nav box .mf navíposition:absolute; width: 1080px; height:60px; z-index: 99999; | 

.carl .mf 1,.mf nav .mf 1l{ padding-top:18px; color:#989898;} 

.carl .mf 1 input,.mf nav .mf l input(margin-right:20px;j 

.carl .mf 1 del,.mf nav .mf ] del(margin:0 54px; cursor: pointer; } 

.Carl .mf r div,.mf nav .mf r div (float:left; color:#333; font-size: 14px;j 

.Carl .mf r span,.mf nav .mf r span {color:#f44b08;} 

.carl .mf sub,.mf nav .mf sub{*padding-top:14px;} 

.carl .mf sub a,mf nav .mf sub  aídisplay:inline-block; ^ background:url(../img/carbj.png) no- 
repeat;width:93px; height:32px; line-height:32px; text-align:center; color:#fff; font-size: 14px;] 

.carl .mf r price,.mf nav .mf r price(margin:0 50px;j 

.carl .mf r price span,.mf nav .mf r price span {font-size:16px; line-height:20px;i 

.carl .others (position:relative; background:#fff, padding:10px 0 5px; width:1190px; height:330px;j 

.Carl .others lif float:left; } 

.Carl .others .others con list{float:left; width:234px; margin-right:35px;; display:inline; color:#444;} 
.carl .others img (width:234px; height:224px;j 

.carl .others confwidth:1044px; margin:0 auto; position:relative; height:330px;j 

.Carl .others ul (width:1100px; position:absolute; left:0;top:0;} 

.Carl .others footípadding:0 12px;j 

.Carl .others name (line-height:24px; height:A8px; overflow:hidden; } 

.Carl .others name a{color:#444;} 

.Carl .others price(line-height:30px;) 

.carl .others price strong color: ZfA44b08; font-size: 18px; font-weight:normal;] 

.Carl .others price span {color:#999; } 

.Carl .others btn|line-height:20px; 

.carl „others btn sívertical-align:middle; ^ display:zinline-block; width:l4px; ^ height:14px; 
background:url(../img/carb].png) no-repeat right -35px; margin-right: 8px; } 


.carl .others btn span {vertical-align:middle; color:#1f9cdc;} 


sos 风物 车 系统 布局 


.carl .others .btns{position:absolute; width:26px; height:80px; margin-top:-40px; top:50%; 
background:url(../img/carbj.png) no-repeat 0 -32px;} 

.Carl .others .btn 1{left:30px;} 

.Carl .others .btn rí(right:30px;background:url(../img/carb].png) no-repeat -28px -32px;} 

.footer {padding:1Spx 0 30px; | 

.footer .text{text-align:center;line-height:30px; font-size: 16px; color:#333;} 


.carl .fallure pro{ background:#fff, margin-bottom: 30px; padding: 0 10px 20px 20px;} 

.carl .fallure pro .failure pro tit{ height:44px; } 

.carl failure pro .failure pro tit p{ display: inline-block; line-height:34px; padding-top: 10px; color:#444; 
font-size:l4px; vertical-align:middle; padding-right:20px; background:url(../img/car ico.png) no-repeat 
right 20px; } 


html,body { height:10096; } 
.filter{ position:absolute; width:10096; height:10096;top:Opx; left:0px; background:7000; opacity:0.4; 
filter:alpha(opacity—40); display:none;] 


POR nt 

.failure ( background: fÜ0f0f0; } 

failure .title{ padding:0 2px; margin:20px 5px 0 0; font-size:l2px; line-height:20px; height:20px; 
background: Zdbdbdb; } 

.Carl .failure .prodt name a{color:#dOcfcd;} 

.carl .failure .prodt textícolor:ZdOcfcd;) 

.carl .failure .lis2,.carl .failure .lis3,.carl .failure .lisS {color:#dOcfcd;} 


(3) 实例 中 使 用 了 两 个 动态 的 交互 功能 ， 其 一 是 单 击 “一 ”和 “十 ” 投 钮 时 采购 清单 能 
够 目 动 累 计 结 算 ， 选 择 “ 全 选 ” 复 选 框 时 “数量 总 计 ” 和 “货品 金额 总 计 ” 也 能 够 目 动 宗 计 


并 结算 ， 如 网 9-16 所 示 ; 其 二 是 负面 最 乓 部 的 产品 轮 播 动画 ， 如 图 9-17 所 示 。 


[muse x V3 
€ > QC fi file///D:/yigou/R12z.html 


进货 车 状态 ( 2/ 100 ) 数量 总 计 : 2 件 货品 金额 总 计 ( 不 会 运费 ) : 200 元 
货品 数量 金额 (元 ) 


p 
回 供应 商 LHP HESR 


e) 厂家 批发 夏季 爆 款 塌 版 短 袖 5-9 件 : 100.00 
连衣裙 涉 女 中 长 款 雪 纺 福 爆 m" [ 1 +) 100.00 
颜色 :黑白 尺寸 : S 10-29 件 : 90.00 加 数 县 或 侈 额 不 湛 足 商家 规则 
z30 件 : 80.00 


供应 商 : 深圳 市 宇 安 区 沙 间 尝 侈 服装 厂 


厂家 批发 夏季 爆 款 韩版 短 袖 5-9 件 : 100.00 


连衣裙 淑女 中 长 款 到 纺 裙 爆 ( 1|[*) 100.00 


^ 颜色 :黑白 尺寸 : S 10-298: : 90.00 四 数量 或 全 额 不 江 呈 商家 规则 


5-9 件 : 100.00 
10-29 件 : 90.00 


数量 总 计 : 2 件 货品 金额 总 计 ( 不 会 运费 ) : 200 元 


图 9-16 ”购物 车 的 动态 结算 统计 


Chl 100.00 
中 数量 或 会 额 不 浇 足 商家 规则 


数量 总 计 ; 2 件 货品 金额 总 计 ( 不 合 运 费 ) ; 200 元 


伊 薄 美 2016 新 款 无 袖 圆 领 背 心 禄 复 
证 银 沙化 

¥ 75.00 

Q 加 入 购物 车 


伊 荡 美 2016 新 款 无 袖 圆 领 背 心 裙 复 
ERDE 


as PAGE i oem ni Led 
mE 


2 件 起 Y 75.00 


O 加 入 购物 车 


2 件 起 ¥ 75.00 


Q 加 入 购物 车 


2 件 起 ¥ 75.00 


Q ”加 入 风物 车 


9-17. 产品 动态 轮 播 动画 


(4) 将 实现 上 述 功能 的 JavaScript 代码 放 在 shopCard.js 文件 里 面 ， 


定义 的 值 都 已 经 单独 标注 出 ， 核 心 的 JavaScript 代码 如 下 : 


S(function() 1 
/购物 车 
$(.j pronum .btn l').click(function() { 
var is = parseInt(S(this).next('.1np).find('input').val()); 
if(is*0)1 
1S--; 
$S(this).next('.inp").find('input').val(1s); 
j 
changeNum(is,S(this).closest(.] pronum').siblings('.lis2")); 
changePrice(is,S(this).closest(j pronum); 
J; 
$(.j pronum .btn r'").click(function(){ 


HTML5*CSS* JavaScript mi 


RN um 4 
uU» UU» Uy = d ™ 


© © © e e o o 


局 从 入 门 到 精通 一 


fREESEDO ARARE DIRE 


2 件 起 


前 站 DIV 布局 时 需要 


var Is = parseInt(S(this).prev('.inp").find('input').val()), max = parseInt(S(this).closest(.] pronum').find 


('input[name-"stock" |).val()); 
if(iscmax)1 
1S 十 十 ; 
S(this).prev('1np).find('input').val(1s); 
:else1 
dialog( í 
title: ' 删 除 ,， 
content: "该 产品 库存 为 +max+' 件 '， 
okValue: "ffi XE", 
ok: function () { 
this.close(); 


return false; 


h 
cancelValue: ' 取 消 '， 


购物 车 系统 布局 


cancel: function () (1 
J).show(); 


changeNumy(is,S(this).closest(.] pronum').siblings('.lis2")); 
changePrice(is,S(this).closest(.j pronum"); 


}); 


$(.j pronum input').change(function(){ 
var is = parseInt(S(this).val()), max = parseInt(S(this).closest(.; pronum?).find (input [name= 
"stock" |).val()); 


if(isc0)1 
is = 0; 
$(this).val(0); 
j 
if(is*max)1 
is = max; 
$(this).val(max); 
j 


changeNumy(is,S(this).closest(.] pronum').siblings('.lis2")); 
changePrice(is,S(this).closest(j pronum); 
DD 


function changeNum(num,obj) í 
var min] = parseInt(obj.find('input').eq(0).attr("min")), 
min2 = parseInt(obj.find('input)).eq(1).attr('min')), 
min3 = parseInt(obj.find('input ).eq(2).attr('min")); 
ifí(num«minl)1 
obj.closest(.mc c').find(.num prompt .show(); 
:else1 
obj.closest(.mc c').find(.num prompt .hide(); 


if( num>=min1){ 
obj.find('p.eq(0).addClass('on); 
ifí(min2 &&(num»-min2))( 
obj.find('p").removeClass('on'); 
obj.find('p.eq(1).addClass('on'); 
if(min3 && (num»-min3))( 
obj.find('p").removeClass('on'); 
obj.find('p.eq(2).addClass('on'); 


NumsSumY(); 
NumPrice(); 
J; 
function changePrice(num,obj){ 
var idx = obj.prev('.lis2).find('p[class-"on" ]|).index(); 
var price = obj.prev('.lis2').find(input').eq(idx).attr('price'); 
var sum = price * num; 
obj.siblings('.lis5').html(sum.toFixed(2)); 


NumSum); 
NumPrice(); 
I 
function NumSum()1 


var sumNum - 0; 
$(.j pronum.each(function(i) ( 
if(S(this).closest(.mc c").find('input[type-" checkbox" ].attr('checked")) { 
sumNum += parseInt(S(this).find('input[name-"skuBuyNumber" |).val()); 
} 

J); 

$(.mf r num span').html(sumNum); 


D 


function NumPrice() 
var sumPrice = 0; 
$('.lis5".each(function() { 


"s HTML5-*CSS- JavaScript 网 页 布局 从 入门 到 精通 


if(S(this).closest(.mc c').find('input[type-" checkbox" ]".attr('checked")) f 


sumPrice += parseInt(S(this).html()); 


J; 
$(.mf r price span').html(sumPrice); 
console.log(sumPrice); 
}; 
/删除 购物 车 产品 
$(.j prodel').click(functionO{ 
var pars = S(this).closest('.mc"), par = S(this).closest(.mc c); 
var name = $(this).parent().siblings(".lis1").find(.prodt name").html(); 
dialog( í 
title: ' 删 除 ,， 
content: name, 
okValue: fff E", 
ok: function () 1 
if(pars.find(.mc c').length == 1){ 
pars.remover(); 
:else1 


par.remove(); 


购物 车 系统 布局 


NumSumY(); 
NumPrice(); 
//$(.] sumnum").html(S('.content .mc").length); 
this.close(); 
return false; 

与 

cancelValue: ' 取 消 '， 

cancel: function () {} 

}).show0; 


DD 
/删除 选中 
$(.mf 1 del').click(function(){ 


dialog({ 
title: JR, 
content: ' 硝 定 删除 购物 车 中 已 经 选中 的 产品 ? ， 
okValue: ' 人 确定 '， 
ok: function () { 
$(.checkSin").each(function(1) { 
if( $(this).attr('checked")) f 
var pars = S(this).closest('.mc"), par = S(this).closest(.mc c"); 
if(pars.find(.mc c').length == 1){ 


pars.remover(); 


:else1 
par.remove(); 
j 
j 
}); 
NumSum(); 
NumPrice(); 
this.close(); 
return false; 


jh 
cancelValue: ' 取 消 ,， 
cancel: function Q {} 
D.show(); 
J); 
/购物 车 店铺 全 选 事件 
$(.checklist).click(function(){ 
if(S(this).attr('checked"))1 


S(this).closest('.carInput").siblings(.mc c").find('input[type-" checkbox" |').attr('checked','checked"); 
:else1 


S(this).closest('.carInput").siblings(.mc c").find('input[type-" checkbox" |).attr('checked', false); 


"s HTML5-4*CSS-*JavaScript 网 页 布局 从 入 门 到 精通 


}); 


// 购 物 车 店铺 全 选 事 件 
$(.checkAIl).click(function() ( 
if(S(this).attr('checked")) f 
$('.carl .content').find('input[type-" checkbox" ]".attr('checked','checked"); 


:else1 
$('.carl .content).find('input[type-" checkbox" ]").attr('checked', false); 
j 
DD 
// 购 物 车 的 部 轮 揪 


$(.others").slides(( 
container: 'others con ul', 
generateNextPrev: false, 
next: 'next', 
prev: 'prev', 
pagination: false, 
generatePagination: false, 
play: 0, 
pause: true, 
hoverPause: true 
DD 
/选中 改变 价格 和 数量 
$('.carl input[type-"checkbox"]).click(function() f 
NumsSumY(); 
NumPrice(); 
DD 
/取消 父 级 选中 
$(.checkSin").click(function() ( 
if( !IS(this).attr('checked"))( 
$(.checkAIl).attr('checked',false); 
S(this).closest('.mc").find('.checklist").attr('checked', false); 


}); 


/滚动 确认 订单 固定 
$(window).scroll(function() { 
var it =  S(.mf nav box').offset().top, itop =  S$(document).scrollTop(), 


$(window).height(), 1H = $('.mf nav.height(); 


$(.mf nav').css("top'jit); 
if(ih+itop<=it){ 

$(.mf nav').css('top'ih--itop-1H); 
:else1 

$(.mf nav').css('top',it); 


ih 
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if(itop100)4 
$(.backUp").show(); 
}else{ 
$(.backUp').hide(); 


J); 

Ihi n tss 

$(.backUp?.click(function() ( 
$(html,body").animate( { 

scrollTop : 0 

}, 200); 
return false; 

DD» 

DD 


JEA a HaT E html 


在 购物 车 订购 过 程 中 通过 单 击 “确认 下 单 ” 按 钮 能 够 打开 购物 车 系统 的 “确认 订 
TÉ html" wig, An 9-18 所 示 。 


Ik 确认 订单 
€ > Q fi |D file///D/yigou/ti i] &.html 


货品 信息 
货品 


81001355 


给 卖家 留言 :可 | 告诉 二 家 您 的 特殊 需求 


运费 方 快递 5.00 元 
式 : 


RE: 全 店 通 用 10 元 Y 
使 用 积 100 个 -15.00 
分 : 
店铺 合计 ( 含 运费 ) : 75.00 


积分 500 个 ， 可 使 用 100 个 


应 付 总 计 : Y240.00 


配送 至 ; 北京 北京 市 朝阳 区 
BAA ; 环 博 天 下 13800138000 


9-18 “确认 订单 .html” 页 面 


该 页 面 的 布局 比较 简单 ， 对 其 前 端 布局 不 再 具体 介绍 ， 该 者 可 打开 庆 代 人 码 进行 参考 。 在 
该 页 面 中 单 击 “ 添 加 新 地 址 ”， 系 统 会 打开 “添加 收 货 地 址 ”对 话 框 ， 如 网 9-19 Drs. 


e» uy bd = d 


) © © © 多 © z © hd 


CEEITeNEELTE 


图 9-19 “添加 收 贷 地 址 ”对 话 框 


(1) 实现 弹出 “添加 收 货 地 址 ”对 话 框 的 方法 是 ， 首 先 在 页 面 中 布局 好 对 话 框 内 容 并 隐 
藏 ， 然 后 通过 JavaScript 激活 弹出 。 该 功能 的 页 面 布 局 样式 表 如 下 : 


PRESE HR J 

ew addrí width:552px; height:312px; display:none; border:lpx solid 7787878; position:absolute; z- 
index:999; top:200px; left:50%; margin-left:-275px; background: f0f0f0; ! 

ew addr .tit(border-bottom:lpx solid Zd6d6d6; height:40px; line-height:40px; color:#222; text- 
indent: 1 0px; } 

.new addr.info box{ padding:lOpx 0; } 

.new addr.info box li{ padding-bottom:14px; height:22px; } 

.new addr .info box li .nametit{ width:82px; height:22px; line-height:22px; float:left; color:#222; text- 
align:right; } 

ew addr .info box li select{ width:80px; float:left; padding:0 5px; height:20px; line-height:20px; 
border: 1px solid Zd8d9db; margin-right: 18px; } 

.new addr .Info box li input( width:l94px; float:left; border:1px solid #d8d9db; padding:0 5px; 
height:20px;line-height20px; j 

.new addr info box li .inputl{ width:440px; } 

.new addr.confir info( height:27px; line-height:26px; padding-left:l8px; — j 

.new addr.confir info label float:left;} 

.new addr.confir infolabelinput(  vertical-align:middle;  } 

.new addr .confir info label .txt{ — display:inline-block; line-height:26px; color:#222; padding:0 10px 0 
3px; j 

.new addr .confir info .confirm| float:left; width:66px; height:27px; background:url(../img/new - 
addrl.png) no-repeat; margin-right:5px; } 

.new addr .confir info .cancel( color:#222; line-height:26px; padding:0 5px; } 


通过 上 面 的 命令 可 以 清空 购物 车 里 的 订单 ， 并 返回 gouwuche.php 重新 进行 订购 。 
(2) 将 实现 交互 的 动态 JavaScript 命令 放 在 confir orderjs 文件 里 面 ， 具 体 的 代码 如 下 : 


$(functionO{ 
var addrstr = null; 
// 衣 次 添加 新 地 址 
$(.j addNew.click(function() ( 


X95 GUESS 


$(.filter.j new addr').show(); 
D 
I MAS AGERE 
$(.j new addr .cancel").click(function() { 
$(.filter,j new addr).hide(); C 
DD» 
[PRA S GRE 
$(.j new addr .confirm?).click(function() ( 
var flag = true; 
$(.j. userinfo").each(function()( 


if(!$(this).val()){ 
alert(S(this).attr("prompt")); 
flag — false; 
return false; 
j 
y): 
if(flag){ 


addrstr = '<span>'+$(".] userinfo").eq(0).val()+'</span><span>'+ $(".] userinfo") 
.eq(1).val()+'</span> <span>'+$(".] userinfo").eq(2).val()+'</span>(<span>'+$(".] userinfo").eq(3).val()+ 
'</span> 收 )<span>'+$(".j] userinfo").eq(4).valO+'</span>(<span>'+$(".] userinfo").eq(5).valO+'</span>) 
<span>'+$(".] userinfo").eq(6).val()+'</span>'; 

$(.filterj new addr').hide(); 

newAddr(addrstr); 

$(.addNew^).hide(); 

$(.oldhome.show(); 

if(!S(this).hasClass('on))( 

$(.j addr ul li[class-"addr list clearfix" |).hide(); 


j 
j 
DD 
function newA ddt(str) ( 
var addr = <l class-"addr list clearfix"^«input type="radio" name-"addr" /><p 


class-"j info">'+strt'</p><a href-"javascript:;" class-"change"^ 修改 地 址 </a><a  href-"javascript:;" 
class="delete"> 删 除 地 址 </a><li> 

$(.j addr ul).prepend(addr); 

$(.j addr ul1'").find(li).removeClass('on').eq(0).addClass('on'); 

$(.; addr ul.find('input[name-"addr" ]|).eq(0).attr('checked','checked"); 


7 
/选中 地 址 
$(.j addr ul).on('click',input[name-"addr" |',function() ( 
$(.j addr ul li').removeClass('on); 
S(this).closest('li).addClass('on); 
i) 
/下 拉 收 起 
$(.addr show btn').click(function() f 
if('S(this).hasClass('on")) ( 
$(this).html(' 收 起 ”).addClass('on'); 
$(.j addr ul li').show0; 
:else1 
$(this).html( 1&7T").removeClass('on!); 


"P HTML5-4CSS-*JavaScript 网 页 布局 从 入 门 到 精通 


$(.j addr ul lifclass="addr list clearfix"|).hide(); 
j 
DD» 
/删除 地 址 
$(.j addr ul').on('click','.delete';function() f 
S(this).closest(.addr list').remove(); 


D» 
// 修 改 地 址 
$(.j addr ul").on('click','.change',function(){ 
var arr — []; 
var addrO = S(this).siblings(.; info"); 
addrO.find('span).each(function(1) { 
var str = S(this).text(); 
arr.push(str); 
j); 
$(".j userinfo").each(function(i) { 
S(this).val(arr[i]); 
DD? 
$(.filter.] new addr).show(); 
$(this).closest(.addr list').remove(); 
性 
// 


$(.leave mc textarea").focus(function() ( 
$(.leave mc^.find('p).hide(); 
DD 


$(.leave mc textarea").blur(function()( 
if(S(this).val()* ^ "){ 
$(.leave mc").find('p.show(); 
j 


DD 
IRSE SE 
$(window).scroll(function() { 
var itop = $("body,html").scrollTop(); 
var itop2 = 200 + itop; 
$( .filter).css('top',itop); 
$(.new addr).css('top',itop2); 


rh 


付款 ,html 


在 “确认 订单 .html” 页 面 中 单 击 “提交 订单 ”按钮 能 够 打开 购物 车 系统 的 “付款 .html” 
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页 面 ， 具 体 效果 如 图 9-20 所 示 。 


x 


€ > C fi |D file:///D:/yigou/ 付 款 .html 


EE RIEUIRENS : 6 
共 合 并 了 2 笔 订 单 ”订单 详情 订单 总 额 半 240.00 元 
显示 订单 


收 起 订单 


400-6688-038 | 帮助 中 


9 ”可 百度 钱包 


如 果 交 易 金 额 大 于 网 银 限额 ， 建议 使 用 á 易 购 网 支付 平台 充值 支付 >> 


付款 遇 到 问题 : 


1 .选择 吻 批 收银 台 担 保 交 易 ， 有 何 保障 ? 


答 : 在 易 购 网 平台 进货 时 ， 付 款 选 择 易 批 收 银 台 做 担保 交易 ， 货 款 并 未 直接 付 给 卖家 ， 而 是 付款 到 易 批 收 银 台 ， 您 收 到 货物 签收 无 误 后 ， 再 次 确认 收 货 时 ， 订 单 款项 才 会 结算 给 卖家 ， 根 当 于 货 到 付款 践 。 


2. 没 有 网 银 怎么 办 ? 


图 9-20 “付款 .html” 页 面 效 果 


“付款.html” 页 面 的 布局 相对 简单 ， 布 局 的 技术 难点 在 于 蛙 击 “订单 详情 ”时 会 打开 
“显示 订单 ”和 “ 收 起 订单 ”两 个 下 拉 列 表 项 ， 当 选择 “显示 订单 ”选项 时 要 在 当前 页 面 显 
示 订 单 的 详细 情况 ， 如 图 9-21 所 示 。 


D 付款 x 
| & > C fi |D file///D;/yigou/fisi.html 


购物 车 a MES = 


1aIEGESRaseiibiiR e 25 : e 


共 合 并 了 2 笔 订 单 ”订单 详情 订单 总 额 羊 240.00 元 


订单 号 商家 名 称 商品 名 称 


diy 补 钻 胶水 iphone4 贴 钻 手 机 壳 补 钻 材 料 美 
甲 美容 小 红 胶 水 

diy 补 钻 胶 水 iphone4 贴 钻 手机 壳 补 钻 材 料 美 
甲 美 容 小 红 胶 水 

diy#N 钻 胶水 iphone4 贴 钻 手机 竞 补 钻 材 料 差 
甲 美 容 小 红 胶 水 


1420598548 恒 济 五 金 卫浴 连锁 


1420598548 恒 济 五 金 卫浴 连锁 


如 果 交 易 金 额 大 于 网 银 限 额 ， 建议 使 用 。 吻 购 网 支付 平台 充值 支付 >> 


付款 遇 到 问题 : 
1 选择 易 批 收报 台 担 保 交 易 ， 有 何 保障 ? 
* : 在 易 购 网 笠 台 进货 时 ， 付 款 选 择 易 批 收银 台 做 担保 交易 ， 货 款 并 未 直接 付 给 卖家 ,而 是 付款 到 易 批 收银 台 ， 您 收 到 货物 签收 无 误 后 ， 再 次 确认 收 货 时 ， 订 单 款项 才 会 结算 给 卖家 ， 相 当 于 货 到 付款 哦 。 


2 没有 网 银 怎 么 办 ? 


9-21 显示 订单 的 详细 情况 


CG) 实现 在 当前 页 面 显 示 “ 订 单 详 情 ” 列 表 的 方法 是 ， 首 先 在 页 面 中 布局 好 订单 的 具体 
内 容 并 隐藏 ， 然 后 通过 JavaScript 实现 激活 。 将 该 功能 的 页 面 布局 样式 表 放 在 ordercss 中 ， 
具体 如 下 : 


.buyl{border-top:2px solid Zelelel;border-bottom:2px solid Zelelel; background: Zf8f8f8; 
padding:12px 0 40px;j 

.buyl .b titlefIine-height:27px; padding-left:20px; height:27px;) 

.buyl .b title 1{float:left; margin-top:5px; line-height:0px; width:l5px; height:l15px; overflow:hidden; 


HTML5*CSS-tJavaScript 网 页 布局 从 入 门 到 精通 


background:url(../img/buyico.png) right 0 no-repeat; } 

.buyl  .b ordersíposition:relative; border:lpx solid #e9e8e8;  height40px;  line-height:A0px; 
background:#fff; | 

.buyl .b orders .orderInfíposition:absolute; display:none; z-index:40; width:l1180px;top:4lpx; left:0; 
border:4px solid Zeae8e5; border-top:none;] 

.buyl .orderInf th{background:#eae8e8; height:60px;border:lpx solid Zelelel; text-align:center; font- 
size: 14px; border-top:none; border-left:none; 

.buyl .orderInf td (border: 1px solid 7elelel; background:#fff, text-align: center; } 

.buyl .orderInf .tbox ( margin-top:-1px;] 

.buyl .orderInf td ul [border-top:1px solid 7elelel;j 

.buyl .orderInf td li{float: left; text-align:center; width:233px;j 

.buyl .orderInf td a{color:#0192da; } 

.buyl .orderInf .name a(color:2444;1 

.buyl .orderInf td .name (border-right:1px solid Zelelel; width:237px;*width:236px; line-height: 22px;j 
.buyl .b orders.b order l[padding-left: 190px; font-size: 14px;] 

.buyl .b orders.b order l.order text/float:left;) 

.buyl .b orders.b orders lí position:relative;] 

.buyl.b orders.b orders l aífont-size:12px; color:#0192da; line-height:38px; margin-left: 18px; display: 
inline-block; vertical-align:middle; 

.buyl .b orders.b order rípadding-right:185px;) 

.buyl .b orders strong {color:#f44b08; font-size:18px;] 

.buyl .b orders .order btnsí[position:absolute; display:none; left:4px; top:30px; border:lpx solid 
Zte9e8eS8;padding:3px 2px;background:Zfff; width:62px; z-index:50;} 

.buyl .b orders .order btns li{width:60px; height:24px; line-height:24px; text-align:center; color:Z444; 
border: 1px solid Ze9e8e8;margin-bottom: 4px; cursor:pointer; } 

.buyl .b orders .order btns .onícolor:zfA4b08;1 

.buyl .b way,.buyl.b trouble(border:1px solid Ze9e8e8; margin-top: 18px;background:#fff; } 

.buyl .b way .mt(padding:18px 20px 0;} 

.buyl .b way .mt title (font-size: 16px; color:#444; line-height: 1 6px;} 

.buyl .b way .mt helpíborder:lpx solid Zddd; width:173px; height:33px; line-height:33px; text-align: 
center; } 

.buyl .b way .mc{padding:10px 0 10px 64px;} 

.buyl .b way .mc li{float:left; display:inline; margin-right: 128px} 

.buyl .b way .mc label,buyl.b way .mc mput{vertical-align:middle;} 

.buyl .b way .mc img{margin-left:14px;border:1px solid #dfdfdf; width:l6lpx; height:71px; vertical- 
align:middle;} 

.buyl .b way .nextGo{border-top:lpx solid 7eae8e5; padding:0 0 0 105px; line-height:16px; 
height:117px;} 

.buyl .b way .btns{padding:23px 0 20px;} 

.buyl .b way .btns a{width:140px;height:30px; line-height:30px; text-align:center; color:#fff, 
display:inline-block; background:url(../img/buyico.png) 0 -41px no-repeat;} 

.buyl .b way .suggest a{margin-left:22px; color:#0192da;} 

.buyl .b trouble{padding:0px 20px 20px; } 

.buyl .b trouble h3 {line-height:50px; color:#3d3d3d; font-size:16px;padding-bottom:6px;} 

.buyl .b trouble li{line-height:24px; padding-bottom:16px; 

.buyl .b trouble p{color:#999;} 

.buyl .b trouble a{color:#0192da;} 

.buyl .b trouble .more{margin-right:184px;} 


购物 车 系统 布局 


(2) 将 实现 交互 的 动态 JavaScript 命令 放 在 userjs 文件 里 面 ， 具 体 的 代码 如 下 : 


/订单 详情 
$(.j orderinfo".hover(function() ( 
$(.order btns').stop(true).slideDown(); 
},function(){ 
$(.order btns').stop(true).slideUp(); 


b 


$(-order btns .show).click(function() ( 
$( .orderInf).stop(true).slideDown(); 
$(this).removeClass(' on"); 
$(.order btns .hide").addClass('on^; 


}); 


$('.order btns .hide").click(function() ( 
$( .orderInf).stop(true).slideUp(); 
$(this).removeClass(' on"); 
$(.order btns .show").addClass('on); 


}); 


Jn C 完成 .html 


“完成 .html” 页 面 是 购物 车 系统 的 最 后 一 个 页 面 ， 一 般 只 要 设计 友好 提示 的 界面 即 可 ， 
如 图 9-22 所 示 。 该 页 面 的 布局 也 相对 简单 ， 是 在 “付款 .html” 页 面 的 基础 上 进行 适当 的 文字 
提醒 修改 。 


1TSkill. com 


您 已 经 完成 付款 ， 购 物 完成 。@ 


共 购 买 了 2 笔 订 单 ”订单 详情 订单 总 额 羊 240.00 元 


付款 遇 到 问题 : 

1 选择 易 批 收 波 台 担保 交易 ， 有 何 保障 ? 

4 : 在 易 购 网 平台 进货 时 ， 付 款 选 择 易 批 收银 台 做 担保 交易 ， 货 款 并 未 直接 付 给 卖家 ， 而 是 付款 到 吻 批 收银 台 ， 您 收 到 货物 签收 无 误 后 ， 再 次 确认 收 货 时 ， 订 单 款项 才 会 结算 给 卖家 ， 相当 于 货 到 付款 哦 。 
2. 没 有 网 银 怎 么 办 ? 

答 : 如 果 和 您 没有 了 网银， 推荐 您 使 用 快捷 支付 来 选择 相应 急行， 轻松 完成 付款 。 您 还 可 以 通过 支付 宇 、 百 度 钱包 等 第 二 方 支付 平台 来 付款 。 


3. 我 有 网 上 银行 ， 不 知道 怎么 操作 ? 
4 : 可 能 是 由 于 银行 的 数据 没有 即时 传输 ， 请 您 不 要 担心 ， 稍 后 刷新 页 面 查 看 。 如 较 长 时 间 仍 显示 未 付款 ， 可 联系 易 批 客服 (400-6688-038) 为 您 解决 。 


更 多 帮助 进入 我 的 易 批 
4 


图 9-22 “完成 .html” 页 面 效 来 


整个 购物 系统 前 台布 局 功能 的 核心 拉 术 部 分 到 这 里 已经 介绍 完了 ， 当 然 ， 在 制作 的 网 站 
中 还 会 有 一 些小 功能 页 面 ， 由 于 篇 幅 有 限 ， 这 里 不 做 具体 介绍 ， 用 户 在 使 用 时 可 以 根据 目 己 
的 需求 对 网 站 进行 完善 和 更 改 ， 从 而 达到 目 己 的 使 用 要 求 。 
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